Hide tooltip onmouseout?

[Nik]

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"
            Title="">
Content
</rad:RadToolTip>

<span runat="server" id="lnkTT" onmouseover="showTT(this); return false;"></span>

function showtTT(trigger)
{
    var tooltip = $find("TT");
    if(tooltip != null)
    {
        tooltip.set_targetControl(trigger);
        tooltip.show();
    }
}

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?

[Marin Bratanov]

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=""
    HideEvent="FromCode">
    Content
</telerik:RadToolTip>

<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)
    {
        tooltip.set_targetControl(trigger);
        tooltip.show();
    }
}

function hideToolTip()
{
    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (activeTooltip)
    {
        activeTooltip.hide();
    }
}

  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,
Marin
the Telerik team