Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ToolTip / Client-side Events

Hover on the links to trigger the RadToolTip 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
Clear log Event log:

  • Client-Side Events


    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_cancel method, 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() + ']?'));
    }

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ClientSideEvents.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <script type="text/javascript">
            //<![CDATA[
            /**********************************************************
            ToolTip Events
            **********************************************************/
            function OnClientBeforeShow(sender, eventArgs)
            {
                logEvent(eventArgs + "ToolTip with ID " + sender.get_id() + " will show.");
            }

            function OnClientBeforeHide(sender, eventArgs)
            {
                logEvent("ToolTip with ID " + sender.get_id() + " will hide.");
            }

            function OnClientHide(sender, eventArgs)
            {
                logEvent("ToolTip with ID " + sender.get_id() + " is hidden.");
            }

            function OnClientShow(sender, eventArgs)
            {
                logEvent("ToolTip with ID " + sender.get_id() + " is shown.");
            }
               //]]>
        </script>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div class="module">
            <div class="bigModule" style="margin-bottom: 40px">
                <div class="bigModuleBottom">
                    Hover on the links to trigger the RadToolTip events.
                </div>
            </div>
            <br />
            <hr />
            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
        </div>
        <telerik:RadToolTip runat="server" ID="RadToolTip2" Height="100px" Width="150px"
            IsClientID="true" TargetControlID="link1" OnClientBeforeHide="OnClientBeforeHide"
            OnClientBeforeShow="OnClientBeforeShow" Position="TopCenter" OnClientHide="OnClientHide"
            OnClientShow="OnClientShow" RelativeTo="Element" EnableShadow="true" />
        <telerik:RadToolTip ID="RadToolTip3" runat="server" Height="100px" Width="150px"
            IsClientID="true" TargetControlID="link2" OnClientBeforeHide="OnClientBeforeHide"
            OnClientBeforeShow="OnClientBeforeShow" OnClientHide="OnClientHide" Position="TopCenter"
            OnClientShow="OnClientShow" RelativeTo="Element" EnableShadow="true" Text="Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat." />
        <telerik:RadToolTip ID="RadToolTip4" runat="server" Height="150px" Width="150px"
            TargetControlID="link3" RelativeTo="Element" OnClientBeforeHide="OnClientBeforeHide"
            OnClientBeforeShow="OnClientBeforeShow" Position="TopCenter" EnableShadow="true"
            OnClientHide="OnClientHide" OnClientShow="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 ID="RadToolTip5" runat="server" EnableShadow="true" RelativeTo="Element"
            Height="50px" Width="100px" TargetControlID="link4" OnClientBeforeHide="OnClientBeforeHide"
            OnClientBeforeShow="OnClientBeforeShow" Position="TopCenter" OnClientHide="OnClientHide"
            OnClientShow="OnClientShow">
            Typi non habent claritatem insitam; est usus legentis
        </telerik:RadToolTip>
        <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" />
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451