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

Show on Event

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

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.

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.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="localRfd" runat="server" DecoratedControls="All" DecorationZoneID="localZone" Skin="Default" />
    <div id="localZone">
        <asp:Label Visible="false" ID="Label1" runat="server"></asp:Label>
        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip1" Width="200px" ShowEvent="onmouseover"
            RelativeTo="Element" Animation="Resize" TargetControlID="helpLinkImage" IsClientID="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>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip2" runat="server" Width="100px" ShowEvent="OnClick"
            TargetControlID="link2" IsClientID="true" HideEvent="LeaveToolTip" Position="Center"
            Animation="Resize" ShowDelay="0" RelativeTo="Element" Text="Right-click on the picture above to show the RadToolTip.">
        </telerik:RadToolTip>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip3" runat="server" TargetControlID="imgRightClick"
            IsClientID="true" RelativeTo="Element" ShowEvent="OnRightClick" HideEvent="LeaveTargetAndToolTip"
            Animation="Fade" ShowDelay="10" Width="100" Height="100" Position="TopRight"
            Text="Copy right protected.">
        </telerik:RadToolTip>
        <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTip5" ShowEvent="OnFocus" OnClientShow="OnClientShow"
            Skin="Default" ShowDelay="200" AutoCloseDelay="5000" Width="300px" Position="MiddleRight"
            RelativeTo="Element">
            <TargetControls>
                <telerik:ToolTipTargetControl TargetControlID="txtFirstName"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="txtCompany"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="txtEmail"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="txtPosition"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="txtAddress"></telerik:ToolTipTargetControl>
            </TargetControls>
        </telerik:RadToolTipManager>
        <div class="demo-container no-bg size-wide">
            <div class="registrationFormWrapper">
                <a href="#">
                    <img src="images/help.gif" id="helpLinkImage" class="helpLink" alt="Help link" />
                </a>
                <table class="formTable">
                    <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)" Width="170" Height="24"
                                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)" Width="170" Height="24"
                                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)" Width="170" Height="24"
                                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)" Width="170" Height="24"
                                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)" Width="170" Height="24"
                                ToolTip="Your current snail mail adrress."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <asp:Button ID="btnSubmit" Text="Submit" runat="server"></asp:Button>
                        </td>
                    </tr>
                </table>
            </div>
            <img id="imgRightClick" src="images/rightClick.jpg" alt="image" />
            <a id="link2" href="#" onclick="return false;">Details </a>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance