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

RadToolTip Client-side Events

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis

Event log

RadToolTip provides the following client-side events:

  • OnClientBeforeShow - fires before RadToolTip is shown
  • OnClientShow - fires after RadToolTip is shown
  • OnClientBeforeHide - fires before RadToolTip hides
  • OnClientHide - fires after RadToolTip hides
The properties expect the name of a clientside function to be called. When invoked, two arguments are supplied to the function - the sender[the tooltip itself], and an events argument.
Using the events argument set_cancelmethod, it is possible to cancel two of the client-side events, namely - OnClientBeforeShow and OnClientBeforeHide. Here is how:
function OnClientBeforeShow(sender, eventArgs)
{
    LogEvent(eventArgs + "ToolTip with ID " + sender.get_id() + " will show.");
    eventArgs.set_cancel(!confirm('Show tooltip [' + sender.get_id() + ']?'));
}
Hover on the links to trigger the RadToolTip events.
  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium no-bg">
        <p>
            Lorem ipsum dolor sit amet, <a id="link1" title="Lorem ipsum dolor sit amet, 
            consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
            laoreet dolore magna aliquam erat volutpat." href="#">consectetuer adipiscing</a> elit,
            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper <a id="link2"
            href="#">suscipit</a> lobortis nisl ut aliquip ex ea commodo consequat. Duis
            autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
            <asp:HyperLink ID="link3" runat="server" NavigateUrl="#">dignissim</asp:HyperLink>
            dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
            nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
            doming id quod mazim placerat facer possim assum. Typi non <a runat="server" id="link4"
            href="#">habent</a> claritatem insitam; est usus legentis</p>
    </div>
    <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip2" Width="250px"
        IsClientID="true" TargetControlID="link1" OnClientBeforeHide="telerikDemo.onClientBeforeHide"
        OnClientBeforeShow="telerikDemo.onClientBeforeShow" Position="TopCenter" OnClientHide="telerikDemo.onClientHide"
        OnClientShow="telerikDemo.onClientShow" RelativeTo="Element">
    </telerik:RadToolTip>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip3" runat="server" Width="180px"
        IsClientID="true" TargetControlID="link2" OnClientBeforeHide="telerikDemo.onClientBeforeHide"
        OnClientBeforeShow="telerikDemo.onClientBeforeShow" OnClientHide="telerikDemo.onClientHide" Position="TopCenter"
        OnClientShow="telerikDemo.onClientShow" RelativeTo="Element" Text="Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.">
    </telerik:RadToolTip>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip4" runat="server" Width="200px"
        TargetControlID="link3" RelativeTo="Element" OnClientBeforeHide="telerikDemo.onClientBeforeHide"
        OnClientBeforeShow="telerikDemo.onClientBeforeShow" Position="TopCenter" OnClientHide="telerikDemo.onClientHide"
        OnClientShow="telerikDemo.onClientShow">
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
        dignissim dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
        te feugait nulla facilisi.
    </telerik:RadToolTip>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip5" runat="server" RelativeTo="Element"
        Width="100px" TargetControlID="link4" OnClientBeforeHide="telerikDemo.onClientBeforeHide"
        OnClientBeforeShow="telerikDemo.onClientBeforeShow" Position="TopCenter" OnClientHide="telerikDemo.onClientHide"
        OnClientShow="telerikDemo.onClientShow">
        Typi non habent claritatem insitam; est usus legentis
    </telerik:RadToolTip>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance