Hide tooltip onmouseout?

2 posts, 0 answers
  1. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 13 Jul 2011 Link to this post

    I'm having problems getting my tooltip to hide on mouseout. Its setup like this...

    <rad:RadToolTip ID="radShoppingCartMainTT" runat="server" ShowEvent="FromCode" IsClientID="true"
                Sticky="false" AutoCloseDelay="10000" Position="BottomLeft" RelativeTo="Element"
                OffsetY="2" Height="500px" Width="320px" Skin="Default" ContentScrolling="Y"
    <span runat="server" id="lnkTT" onmouseover="showTT(this); return false;"></span>
    function showtTT(trigger)
        var tooltip = $find("TT");
        if(tooltip != null)

    I tried adding tooltip.set_hideEvent(Telerik.Web.UI.ToolTipHideEvent.Default); to the JS function, but it didnt work. I created a test page with just the element and tooltip and found that if I changed the ShowEvent to onMouseOver and it works properly. How do I get this functionality using my JS function or an additional attribute in the tooltip?
  2. Marin Bratanov
    Marin Bratanov avatar
    3907 posts

    Posted 14 Jul 2011 Link to this post

    Hi Nik,

    I see that you are using a version that is more than three years old. I would advise upgrading to the latest, since many fixes and improvements have been made in the time since.

    I am not sure on which mouseout you would like to hide the tooltip, but if it is the span's I would suggest that you add the appropriate handler to it and hide the tooltip through code (by also setting the HideEvent to FromCode):
    <telerik:RadToolTip ID="radShoppingCartMainTT" runat="server" ShowEvent="FromCode"
        IsClientID="false" Sticky="false" AutoCloseDelay="10000" Position="BottomLeft"
        RelativeTo="Element" OffsetY="2" Height="500px" Width="320px" Skin="Default"
        ContentScrolling="Y" Title=""
    <span runat="server" id="lnkTT" onmouseover="showTT(this); return false;" onmouseout="hideToolTip()">hover for tooltip</span>

    function showTT(trigger)
        var tooltip = $find("radShoppingCartMainTT");
        if (tooltip != null)
    function hideToolTip()
        var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
        if (activeTooltip)

      If you wish to hide it when the mouse leaves the tooltip I would suggest that you set it to LeaveTargetAndToolTip. This functionality has been fixed recently and if you want to use it properly I strongly suggest upgrading to the latest version of the RadControls. In this scenario you wouldn't need the onmouseout event, too.

    All the best,
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top