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 / Show on Event

Use the Tab key to move from one TextBox to the other and see how the RadToolTip opens on focus of the target control. Position the mouse over the Help button to recieve additional instructions. Left-click the Details link to open a RadToolTip with information about the image. Right-click the image to see the copyright statement.

Name:
Company:
E-mail:
Position:
Address:
image Details

  • ShowEvent Property


    RadToolTip offers the property ShowEvent which controls the type of event that triggers the showing of a tooltip. The possible values are:
    • OnMouseOver(Default) - RadToolTip appears on mouse over the target control
    • OnClick - RadToolTip appears on clicking with the left button of the mouse on the target control
    • OnRightClick - RadToolTip appears on right click with the mouse on the target control
    • OnFocus - RadToolTip appears on focus of the target control

    In this example a tooltip shows on right click with the mouse on Details for each image as well as on mouse over each picture.

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.ShowEvent.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" />
        <style type="text/css">
            .ToolTipContent
            {
                color: black;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

        <script type="text/javascript">    
        
         // We need to keep the last tooltip with ShowEvent="OnFocus", as it might be closed
         // by the time the beforeunload event fires, but its target element might still have the
         // focus.
         var lastActiveToolTip = null;
         function OnClientShow(sender, args)
         {
         lastActiveToolTip = sender;
         }

            // When ShowEvent="OnFocus", the RadToolTip handles the blur event of the target element.
            // In case you set the focus on that element, e.g. click inside one of the TextBoxes,
            // and then immediately close the browser window, the blur event is fired before the
            // unload. Therefore, the framework tries to execute all handlers for the blur event.
            // However, at this point the document may have unloaded and we will get an "Unspecified error".
            // As the code that handles this is part of the ajax framework, we can workaround the problem
            // in the beforeunload handler - detach the handlers for the active tooltip.
            function beforeunload()
            {
                var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                if(!activeTooltip) activeTooltip = lastActiveToolTip;
                if(activeTooltip)
                {
                    var targetElement = activeTooltip.get_targetControl();
                    activeTooltip._registerMouseHandlers(targetElement, false);
                }
            };
            
            if(Sys.Browser.agent == Sys.Browser.InternetExplorer)
            {
                window.attachEvent('onbeforeunload', beforeunload);
            }

        </script>

        <asp:Label Visible="false" ID="Label1" runat="server"></asp:Label>
        <telerik:RadToolTip runat="server" ID="RadToolTip1" Width="200px" ShowEvent="onmouseover"
            RelativeTo="Element" Animation="Resize" TargetControlID="link1" IsClientID="true" EnableShadow="true"
            HideEvent="LeaveTargetAndToolTip" Position="TopRight" Text="Use the Tab key to move from one TextBox to the other and see how the RadToolTip opens on focus of the target control." />
        <telerik:RadToolTip ID="RadToolTip2" runat="server" Width="100px" ShowEvent="OnClick"
            TargetControlID="link2" IsClientID="true" HideEvent="LeaveToolTip" Position="Center" EnableShadow="true"
            Animation="Resize" ShowDelay="0" RelativeTo="Element" Text="Right-click on the picture above to show the RadToolTip." />
        <telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="imgRightClick"
            IsClientID="true" RelativeTo="Element" ShowEvent="OnRightClick" HideEvent="LeaveTargetAndToolTip" EnableShadow="true"
            Animation="Fade" ShowDelay="10" Width="100" Height="100" Position="TopRight"
            Text="Copy right protected." />

        <script type="text/javascript">

            function Hilite(me, focus)
            {
                me.style.backgroundColor = false != focus ? "#ffffcc" : "white";
            }

            </script>
            <telerik:RadToolTipManager runat="server" ID="RadToolTip5" EnableShadow="true"
                ShowEvent="OnFocus"    
                OnClientShow="OnClientShow"
                Skin="Default"
                ShowDelay="200"
                AutoCloseDelay="5000"
                Width="300px"
                Position="MiddleRight"
                RelativeTo="Element">
                <TargetControls>
                    <telerik:ToolTipTargetControl TargetControlID="txtFirstName" />
                    <telerik:ToolTipTargetControl TargetControlID="txtCompany" />
                    <telerik:ToolTipTargetControl TargetControlID="txtEmail" />
                    <telerik:ToolTipTargetControl TargetControlID="txtPosition" />
                    <telerik:ToolTipTargetControl TargetControlID="txtAddress" />
                </TargetControls>
            </telerik:RadToolTipManager>
             
             <p>
                Use the Tab key to move from one TextBox to the other and see how the RadToolTip opens on focus of the target control.
                Position the mouse over the Help button to recieve additional instructions. Left-click the Details link to
                open a RadToolTip with information about the image. Right-click the image to see the copyright statement.
             </p>
                <div style="background:url(Img/bg.gif) no-repeat; width: 350px;height:300px;padding:27px 0px 50px 43px;float:left;">
                <a id="link1" href="#"><img src="Img/help.gif" alt="" style="border:0;margin-left:190px;margin-bottom:87px;"/></a>
            <table style="font-size:11px;">
                <tr>
                    <td>
             <asp:Label ID="lblFirstName" runat="server" Text="Name: "></asp:Label>
             </td>
             <td>
    <asp:TextBox ID="txtFirstName" onfocus="Hilite(this)" onblur="Hilite(this, false)"
    TabIndex="1" runat="server" ToolTip="Please, fill in first name, familiy name and any other initials or titles."></asp:TextBox>
                   </td>
         </tr>
        
         <tr>
                    <td>
             <asp:Label ID="lblCompany" runat="server" Text="Company: "></asp:Label>
             </td>
             <td>
    <asp:TextBox ID="txtCompany" TabIndex="2" runat="server"
    onfocus="Hilite(this)" onblur="Hilite(this, false)"
    ToolTip="Company name should be spelled out with proper capitalization."
    ></asp:TextBox>
         </td>
         </tr>
        
         <tr>
                    <td>    
         <asp:Label ID="lblEmail" runat="server" Text="E-mail: "></asp:Label>
         </td>
             <td>
    <asp:TextBox ID="txtEmail" TabIndex="3" runat="server"
    onfocus="Hilite(this)" onblur="Hilite(this, false)"
    ToolTip="It is possible to list more than one email, separated by comma."
    ></asp:TextBox>
         </td>
         </tr>
        
         <tr>
                    <td>    
         <asp:Label ID="lblPosition" runat="server" Text="Position: "></asp:Label>
         </td>
             <td>
    <asp:TextBox ID="txtPosition" TabIndex="4" runat="server"
    onfocus="Hilite(this)" onblur="Hilite(this, false)"
    ToolTip="Please list current position, followed by previous positions at the company, separated by commas."
    ></asp:TextBox>
         </td>
         </tr>
        
         <tr>
                    <td>    
         <asp:Label ID="lblAddress" runat="server" Text="Address: "></asp:Label>
         </td>
             <td>
    <asp:TextBox ID="txtAddress" TabIndex="5" runat="server"
    onfocus="Hilite(this)" onblur="Hilite(this, false)"
    ToolTip= "Your current snail mail adrress."
    ></asp:TextBox>
         </td>
         </tr>
         <tr><td></td>
         <td>
        
         <asp:Button id="btnSubmit" Text="Submit" runat="server" CssCLass="button"/>
         </td>
         </tr>
         </table>
        
         </div>
         <img id="imgRightClick" src="Img/rightClick.jpg" style="border:0;" alt="image" />
            <a id="link2" href="#" onclick="return false;"> Details </a>
            <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