New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Hide on Event

  • Demo Configurator

RadToolTip used to provide ManualClose and Sticky properties which were used to control when the tooltip should hide. These properties are now obsolete and you should use the HideEvent property to control when the tooltip will disappear.

The HideEvent property is an enum and can take the following values, which names describe the effect when they are set:

  • Default
  • FromCode
  • LeaveTargetAndToolTip
  • LeaveToolTip
  • ManualClose

Notes

  1. Setting the HideDelay property to a big value will provide the user with more time to move the mouse from target element over the tooltip The default setting is 300 milliseconds (1/3 second)
  2. A tooltip, regardless of its HideEvent setting will hide when a new tooltip is to be shown, because by design there can be only one RadToolTip visible on the page at any give time
The HideEvent property enables fine-tuning of when a tooltip will be hidden.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.HideEvent.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-medium">
        <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Width="220" Height="190"
            OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" RelativeTo="Element" IgnoreAltAttribute="true">
        </telerik:RadToolTipManager>
        <div>
            <asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound">
                <HeaderTemplate>
                    <table border="0" class="camerasTable" cellpadding="0" cellspacing="0">
                        <tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <td class="cameraCell">
                        <asp:HyperLink ID="Link1" runat="server" NavigateUrl="javascript:void(0);" Style="text-decoration: none; text-align: center;"
                            class="qsf-ib">
                        <asp:Image runat="server" ID="Image1" ImageUrl='<%# String.Format("Images/{0}.gif", Container.DataItem) %>'
                            Style="padding: 20px 0 0 0; display: block; border: 0px;" AlternateText="Camera Image"></asp:Image>
                        <asp:Label Text="<%# Container.DataItem %>" ID="lblText" runat="server" Style="color: black;"></asp:Label>
                        </asp:HyperLink>
                    </td>
                </ItemTemplate>
                <FooterTemplate>
                        </tr>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Value="Default" Selected="True">Default - hides when mouse is out of the target element</asp:ListItem>
                                <asp:ListItem Value="FromCode">FromCode - hides by explicit javascript call to its hide method or when another tooltip has to be shown</asp:ListItem>
                                <asp:ListItem Value="LeaveTargetAndToolTip">LeaveTargetAndToolTip - hides when mouse is neither over the tooltip, nor over the target element</asp:ListItem>
                                <asp:ListItem Value="LeaveToolTip">LeaveToolTip - hides when user hovers the tooltip and then leaves it</asp:ListItem>
                                <asp:ListItem Value="ManualClose">ManualClose - hides when user presses the [x] button of the tooltip</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance