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 Q1 2012 released 04/11/2012
select

ToolTip / RadToolTip versus RadToolTipManager

  • RadToolTipManager has support for loading content on demand using AJAX or a WebService
  • RadToolTipManager can tooltipify all elements on a page that have the "title" attribute automatically
  • RadToolTip can be bound to a target control declaratively when in ItemTemplate, RadToolTipManager needs an entry to its TargetControls collection

*Hover over a row to see an AJAX-loaded list of customers for a country

CountryCustomers count
Argentina3
Austria2
Belgium2
Canada3
Denmark2
Finland2
Mexico5
Norway1

Each row features a RadToolTip declaratively bound to a Label element.
No AJAX is used, content of each tooltip is set on the server

CountryShow Details
Argentina Hover to show a tooltip
Austria Hover to show a tooltip
Belgium Hover to show a tooltip
Canada Hover to show a tooltip
Denmark Hover to show a tooltip
Finland Hover to show a tooltip
Mexico Hover to show a tooltip
Norway Hover to show a tooltip

  • RadToolTipManager vs RadToolTip


    You can achieve the same result by using bothRadToolTipManager and RadToolTip controls. However, for different scenarios it is much better to use one of the controls because there are some differences in both implementations which make them suitable for different setups.

    1. When to use the RadToolTipManager control

      The RadToolTipManager's main advantage is that it allows loading tooltips' content on demand using AJAX, in the RadToolTipManager's OnAjaxUpdate eventhandler. Furthermore, this approach is suitable for scenarios with WebServices.When using the RadToolTipManager control you should iterate through the controls you want to tooltipify and add them to the manager's TargetControls collection. In case you want to replace all the standard browser tooltips with RadToolTips, it is enough only to add a RadToolTipManager control with and empty TargetControls collection on the page and set AutoTooltipify = "true"- the manager automatically will tooltipify all the controls.

    2. When to use the RadToolTip control

      It is more comfortable to use the RadToolTip control when you want to tooltipify a single element. The RadToolTip control can also be included in Item Templates and its content can be set through declarative binding. This requires little code, in fact just a declarative setting. In this case, the content is not updated through AJAX, it is constant.

Source Code

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

    <%@ Register Src="InfoCustomers.ascx" TagName="InfoCustomers" TagPrefix="uc2" %>
    <%@ 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" />
        <link rel="Stylesheet" href="StyleSheet.css" />
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <qsf:InformationBox ID="InformationBox1" runat="server" Font-Bold="true" Width="846">
            <ul>
                <li>RadToolTipManager has support for loading content on demand using AJAX or a WebService</li>
                <li>RadToolTipManager can tooltipify all elements on a page that have the "title" attribute
                    automatically</li>
                <li>RadToolTip can be bound to a target control declaratively when in ItemTemplate,
                    RadToolTipManager needs an entry to its TargetControls collection</li>
            </ul>
        </qsf:InformationBox>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"
            Position="BottomCenter" Animation="Fade" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
            Width="180px" Height="150px" Style="font-size: 18px; text-align: center; font-family: Arial;"
            RenderInPageRoot="true">
        </telerik:RadToolTipManager>
        <div class="GridHolder" style="background: url(Img/title1.png) no-repeat;">
            <div class="ExampleTitle">
                <p>
                    *Hover over a row to see an AJAX-loaded list of customers for a country</p>
            </div>
    <asp:GridView ID="Grid1" runat="server" DataSourceID="SqlDataSource1" OnRowDataBound="Grid1_RowDataBound"
    AutoGenerateColumns="False" Width="100%" CssClass="ToolTipGrid" GridLines="None"
    CellPadding="4" ForeColor="#333333" ClientIDMode="AutoID">
                <HeaderStyle CssClass="header" Height="25" BackColor="#AACFDB" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#AACFDB" />
                <Columns>
                    <asp:BoundField HeaderText="Country" DataField="Country" ReadOnly="true" HeaderStyle-HorizontalAlign="Left" />
    <asp:BoundField HeaderText="Customers count" DataField="CustomersCount" ReadOnly="true"
    HeaderStyle-HorizontalAlign="Left" />
                </Columns>
                <AlternatingRowStyle BackColor="#B6D6E0" />
            </asp:GridView>
        </div>
        <div class="GridHolder" style="background: url(Img/title2.png) no-repeat; margin-left: 20px;
            margin-bottom: 20px;">
            <div class="ExampleTitle">
                <p>
                    Each row features a RadToolTip declaratively bound to a Label element.<br />
                    No AJAX is used, content of each tooltip is set on the server</p>
            </div>
    <asp:GridView ID="DataGrid1" AutoGenerateColumns="False" runat="server" DataSourceID="SqlDataSource1"
    Width="100%" Height="203px" CssClass="ToolTipGrid" GridLines="None">
                <HeaderStyle CssClass="header" Height="25" BackColor="#AACFDB" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#AACFDB" />
                <Columns>
    <asp:BoundField HeaderText="Country" DataField="Country" HeaderStyle-HorizontalAlign="Left"
    ReadOnly="true" />
                    <asp:TemplateField HeaderText="Show Details" HeaderStyle-HorizontalAlign="Left">
                        <ItemTemplate>
                            <asp:Label ID="lbl" runat="server" Text="Hover to show a tooltip"></asp:Label>
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="lbl" RelativeTo="Element"
                                Position="BottomCenter" RenderInPageRoot="true" >
                                There are
                                <%# DataBinder.Eval(Container, "DataItem.CustomersCount")%>
                                customers from
                                <%# DataBinder.Eval(Container, "DataItem.Country")%>
                            </telerik:RadToolTip>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <AlternatingRowStyle BackColor="#B6D6E0" />
            </asp:GridView>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings: NorthwindConnectionString %>"
            SelectCommand="SELECT Country, COUNT(ContactName)AS [CustomersCount] FROM Customers WHERE Country IN (SELECT DISTINCT Country FROM [Customers] WHERE Country = 'Argentina'OR
                        Country = 'Austria' OR Country = 'Belgium' OR Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland'
                        OR Country = 'Mexico' OR Country = 'Norway') GROUP BY Country ">
        </asp:SqlDataSource>
        <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-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451