Change tooltip target control ID using JavaScript

3 posts, 1 answers
  1. Pritam
    Pritam avatar
    3 posts
    Member since:
    Jul 2008

    Posted 22 Aug 2012 Link to this post

    I have a certain problem with a Telerik code sample that I have used for tool-tips (http://www.telerik.com/community/forums/aspnet-ajax/tooltip/changing-targetcontrol-on-the-client.aspx). The requirements is that in a certain page I have some static links which on mouse-hover displays different images using tool-tip. So I created a basic HTML where I added 3 links and tool-tip control. See code sample below - 

    <script type="text/javascript">
        function showToolTipNewTarget(newTarget, imgPath) {
            
            var radTooltip1 = $find("<%= RadToolTip1.ClientID %>");
            
            radTooltip1.set_targetControlID("");
            radTooltip1.set_targetControl(newTarget);
            document.getElementById("MainContent_img99").src = "ProductImages/" + imgPath;
            radTooltip1.show();
            setTimeout(function () {
                radTooltip1.show();
            }, 2000);

        }

       
    </script>


    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                                          <tr>
                                            <td class="acco_txt_white"  width="75%" ><a href="#" id="link1" onmouseover="showToolTipNewTarget(this,'1.jpg');">Link1</a></td>
                                            <td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
                                          </tr>
                                          <tr>
                                            <td class="acco_txt_white"  width="75%" ><a href="#" id="link2" onmouseover="showToolTipNewTarget(this,'2.png');">Link2</a></td>
                                            <td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
                                          </tr>
                                          <tr>
                                            <td class="acco_txt_white"  width="75%" ><a href="#" id="link3" onmouseover="showToolTipNewTarget(this,'3.jpg');">Link3</a></td>
                                            <td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
                                          </tr>
      
                                        </table>


    <telerik:RadToolTip runat="server"  ID="RadToolTip1" RelativeTo="Element" Width="390px"
            Height="70px" TargetControlID="link1" IsClientID="true" Animation="Resize" EnableShadow="true"
            Position="MiddleLeft" HideEvent="LeaveTargetAndToolTip"  >
            
                <div>
                    <asp:Image ID="img99" runat="server" ImageUrl="~/ProductImages/1.jpg" AlternateText="solutions" />
                </div>
            
        </telerik:RadToolTip>

    When I'm setting up the above code, the problem is that there is some kind of ' flicker' effect in the display of the image (it keeps appearing and disappearing at very fast intervals). At times it stays perfect as well, but most of the time I are experiencing the mentioned problem. However, if I use 3 different tool-tips for 3 different links then the images stay constant without any flicker.

    Kindly help.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 23 Aug 2012 Link to this post

    Hello Pritam,

     You have two calls to show(), one of them is delayed a lot, the animation you have also takes time, so what happens is that you first initiate a wrong show() (without the timeout suggested in the sticky thread you linked), the tooltip starts to show, animation takes time, after that the delayed show is called, animation starts again, the tooltip's element is positioned below the mouse pointer, it starts animating and at some point the mouse is again over the link, the mouseover fires, the tooltip shows and so on and so on.

     What I can suggest is that you remove the extra show() method, hide() the tooltip explicitly before showing it, use javascript:void(0); for the href attribute of the links and remove the TargetControlID settings from your tooltip declaration:
    function showToolTipNewTarget(newTarget, imgPath)
    {
        var radTooltip1 = $find("<%= RadToolTip1.ClientID %>");
        radTooltip1.hide();
        radTooltip1.set_targetControl(newTarget);
        $get("myImg").src = imgPath;
        setTimeout(function ()
        {
            radTooltip1.show();
        }, 20);
    }
    <telerik:RadToolTip runat="server" ID="RadToolTip1" RelativeTo="Element" Width="390px"
        Height="70px"  Animation="Resize" EnableShadow="true"
        Position="MiddleLeft" HideEvent="LeaveTargetAndToolTip">
        <div>
        <img id="myImg" />
        </div>
    </telerik:RadToolTip>
    You can also try removing the animation, because this can invoke more calls to onmouseover.

    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pritam
    Pritam avatar
    3 posts
    Member since:
    Jul 2008

    Posted 23 Aug 2012 Link to this post

    Thank you Marin. It easily solved the problem. Many thanks.
Back to Top