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

Automatic Tooltip Generation

Automatically tooltipified HTML Controls
<img /> ToolTip.png
<a> Hyperlink
<input /> HTML checkbox
<input /> HTML radio button
<input />
<input />

Automatically tooltipified Server Controls
<asp:Image> ToolTip.png
<asp:HyperLink> HyperLink
<asp:CheckBox>
<asp:RadioButton>
<asp:Button>
<asp:TextBox>

Automatically re-tooltipified updated elements
Current time: 12/25/2024 7:27:24 PM

This example demonstrates how you can automatically tooltipify Html, Server and AJAX updated Controls on your page. In order to achieve this you should set the Title property of the element if it is an HTML element or its ToolTip server property, if it is a server control to the desired tooltip text. After that you should simply put a RadToolTipManager control with an empty TargetControls collection on the page and set its AutoTooltipify property to true. The default value of this property used to be true but it is now set to false due to most common usage of the RadToolTipManager in ajax scenarios instead of for tooltipifing

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.AutoTooltipify.DefaultCS" %>

<!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" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server"></telerik:RadFormDecorator>
    <div class="demo-containers">
        <div class="demo-container size-narrow no-bg">
            <table class="demo-layout-table">
                <tr>
                    <td colspan="2" style="height: 50px; color: #006076; font-size: 17px; text-align: left; padding-left: 15px;">
                        <h2>Automatically tooltipified HTML Controls</h2>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;img /&gt;</code>
                    </td>
                    <td class="inner">
                        <img src="images/tooltip.png" title="I am an image" style="width: 200px" alt="ToolTip.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;a&gt;</code>
                    </td>
                    <td class="inner">
                        <a title="I am a hyperlink" href="#">Hyperlink</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                    <td class="inner">
                        <input id="Checkbox2" type="checkbox" title="I am a checkbox" />
                        <asp:Label ID="lbl1"
                                   runat="server" Text="HTML checkbox" ToolTip="I am a checkbox"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                    <td class="inner">
                        <input id="Radio1" type="radio" title="I am a radio button" />
                        <asp:Label ID="lbl2"
                                   runat="server" Text="HTML radio button" ToolTip="I am a radio button"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                    <td class="inner">
                        <input id="Button1" type="button" value="button" title="I am a button" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                    <td class="inner">
                        <input id="Text1" type="text" title="I am a textbox" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="demo-container size-narrow no-bg">
            <table class="demo-layout-table">
                <tr>
                    <td colspan="2" style="height: 50px; color: #006076; font-size: 17px; text-align: left; padding-left: 15px;">
                        <h2>Automatically tooltipified Server Controls</h2>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:Image&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:Image ID="Image2" runat="server" ImageUrl="images/tooltip.png" ToolTip="I am an image"
                                   Width="200" AlternateText="ToolTip.png"></asp:Image>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:HyperLink&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:HyperLink ID="HyperLink2" NavigateUrl="#" runat="server" ToolTip="I am a hyperlink">HyperLink</asp:HyperLink>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:CheckBox&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:CheckBox ID="CheckBox4" runat="server" ToolTip="I am a checkbox" Text="Server CheckBox"></asp:CheckBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:RadioButton&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:RadioButton ID="RadioButton2" runat="server" ToolTip="I am a radio button" Text="Server RadioButton"></asp:RadioButton>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:Button&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:Button ID="Button5" runat="server" Text="button" ToolTip="I am a button"></asp:Button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:TextBox&gt;</code>
                    </td>
                    <td class="inner">
                        <asp:TextBox ID="TextBox2" runat="server" ToolTip="I am a textbox"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div class="demo-container size-narrow no-bg">
            <table class="demo-layout-table">
                <tr>
                    <td style="height: 50px; color: #006076; font-size: 17px; text-align: left; padding-left: 15px;">
                        <h2>Automatically re-tooltipified updated elements</h2>
                    </td>
                </tr>
                <tr>
                    <td class="inner">
                        <asp:UpdatePanel ID="pnl" runat="server">
                            <ContentTemplate>
                                <asp:Button ID="Button3" runat="server" Text="Get Time" OnClick="Button3_Click" Style="margin: 0;"></asp:Button>
                                <img src="images/arrow.gif" style="margin: 25px 0 0 0; width: 24px;" alt="" />
                                <asp:Label ID="lblTime" runat="server"></asp:Label>
                            </ContentTemplate>
                        </asp:UpdatePanel>

                    </td>
                </tr>
            </table>
        </div>
    </div>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" RelativeTo="Element"
                               Position="MiddleRight" AutoTooltipify="true" ContentScrolling="Default" Width="150">
    </telerik:RadToolTipManager>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance