Change tooltip target control ID using JavaScript

[Pritam]

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.

[Marin Bratanov]

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

[Pritam]

Thank you Marin. It easily solved the problem. Many thanks.