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 / AutoTooltipify

Mouseover the elements below to view the additional information provided in their tags.

Scenario 1: All HTML and server controls below are automatically tooltipified by setting the RadToolTipManager's Autotooltipify property to true
HTML Controls (Title Attribute)
<img /> ToolTip.png
<a>
Hyperlink
HTML checkbox
HTML radio button
<input />
<input />
<input />
<input />
Server Controls (Tooltip Attribute)
<asp:Image> ToolTip.png
<asp:HyperLink>
HyperLink
<asp:CheckBox>
<asp:RadioButton>
<asp:Button>
<asp:TextBox>



Mouseover the time written below to show it in a tooltip.

Scenario 2: The RadToolTipManager automatically detects partial page updates and re-tooltipifies the updated elements.
Current time: 11/13/2024 10:48:23 PM

  • Autotooltipify controls


    This example demonstrates how you can automatically tooltipify 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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.AutoTooltipify.DefaultVB" %>

    <%@ 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">
            .table
            {
                width: 420px;
                font-size: 14px;
                font-family: Arial;
                border-collapse: collapse;
                background-color: #d2eef1;
                border: solid 1px #d6eefd;
            }
            .table td
            {
                padding: 4px;
                text-align: right;
            }
            .radtooltip_Web20
            {
                text-align: center;
            }
            .inner, td.inner
            {
                background-color: White;
                padding-left: 15px;
                text-align: left;
            }
            .inner td
            {
                text-align: left;
                border: solid 1px #d6eefd;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
        <qsf:InformationBox ID="InformationBox1" runat="server" Width="860" Title="Mouseover the elements below to view the additional information provided in their tags.">
            <strong>Scenario 1:</strong> All HTML and server controls below are automatically
            tooltipified by setting the <strong>RadToolTipManager</strong>'s <strong>Autotooltipify</strong>
            property to <strong>true</strong>
        </qsf:InformationBox>
        <div style="float: left;">
            <table class="table" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" style="height: 50px; color: #006076; font-size: 17px; text-align: left;
                        padding-left: 15px;">
                        <strong>HTML Controls (Title Attribute)</strong>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;img /&gt;</code>
                    </td>
                    <td class="inner">
                        <img src="Img/tooltip.png" title="I am an image" style="width: 200px" alt="ToolTip.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;a&gt;</code>
                    </td>
                    <td rowspan="5" class="inner">
                        <table style="width: 220px; height: 130px; border-collapse: collapse;">
                            <tr>
                                <td>
                                    <a title="I am a hyperlink" href="#">Hyperlink</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
    <input id="Checkbox2" type="checkbox" title="I am checkbox" /><asp:Label ID="lbl1"
    runat="server" Text="HTML checkbox" ToolTip="I am checkbox"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
    <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>
                                    <input id="Button1" type="button" value="button" title="I am a button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Text1" type="text" title="I am a textbox" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;input /&gt;</code>
                    </td>
                </tr>
            </table>
        </div>
        <div style="margin-left: 20px; float: left;">
            <table class="table" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" style="height: 50px; color: #006076; font-size: 17px; text-align: left;
                        padding-left: 15px;">
                        <strong>Server Controls (Tooltip Attribute)</strong>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:Image&gt;</code>
                    </td>
                    <td class="inner">
    <asp:Image ID="Image2" runat="server" ImageUrl="Img/tooltip.png" ToolTip="I am an image"
    Width="200" AlternateText="ToolTip.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:HyperLink&gt;</code>
                    </td>
                    <td rowspan="5" class="inner">
                        <table style="width: 220px; height: 130px; border-collapse: collapse;">
                            <tr>
                                <td>
                                    <asp:HyperLink ID="HyperLink2" NavigateUrl="#" runat="server" ToolTip="I am a hyperlink">HyperLink</asp:HyperLink>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox4" runat="server" ToolTip="I am checkbox" Text="Server TextBox" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:RadioButton ID="RadioButton2" runat="server" ToolTip="I am a radio button" Text="Server RadioButton" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Button ID="Button5" runat="server" Text="button" ToolTip="I am a button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox2" runat="server" ToolTip="I am a textbox"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:CheckBox&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:RadioButton&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:Button&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;asp:TextBox&gt;</code>
                    </td>
                </tr>
            </table>
        </div>
        <div style="clear: both"></div>
            <br />
            <br />
            <br />
            <qsf:InformationBox ID="InformationBox2" runat="server" Width="860" Title="Mouseover the time written below to show it in a tooltip.">
                <strong>Scenario 2:</strong> The <strong>RadToolTipManager</strong> automatically
                detects partial page updates and re-tooltipifies the updated elements.
            </qsf:InformationBox>
            <div>
                <asp:UpdatePanel ID="pnl" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="Button3" runat="server" Text="Get Time" OnClick="Button3_Click" Style="margin: 0;" />
                        <img src="Img/arrow.gif" style="margin: 25px 30px 0 30px; width: 24px; height: 17px;"
                            alt="" />
                        <asp:Label ID="lblTime" runat="server" Text="" ToolTip="" Style="font-weight: bold;"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="Element"
                Position="BottomCenter" AutoTooltipify="true" ContentScrolling="Default" Width="150" EnableShadow="true"
                Height="10">
            </telerik:RadToolTipManager>
            <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