This is a migrated thread and some comments may be shown as answers.

Change tooltip target control ID using JavaScript

2 Answers 111 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Pritam
Top achievements
Rank 1
Pritam asked on 22 Aug 2012, 02:15 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 23 Aug 2012, 03:15 PM
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.
0
Pritam
Top achievements
Rank 1
answered on 23 Aug 2012, 06:26 PM
Thank you Marin. It easily solved the problem. Many thanks.
Tags
ToolTip
Asked by
Pritam
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Pritam
Top achievements
Rank 1
Share this question
or