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

RadToolTip versus RadToolTipManager

Tooltips created by RadToolTipManager

CountryCustomers count
Argentina3
Austria2
Belgium2
Canada3
Denmark2
Finland2
Mexico5
Norway1

Each row features a dedicated RadToolTip

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 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
  • DefaultCS.aspx
  • InfoCustomers.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • InfoCustomers.ascx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ToolTipVersusToolTipManager.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="InfoCustomers.ascx" TagName="InfoCustomers" TagPrefix="uc2" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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" DecoratedControls="GridFormDetailsViews"
        DecorationZoneID="rfd-demo-zone"></telerik:RadFormDecorator>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Position="BottomCenter"
        Animation="Fade" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element" Width="180px" Height="150px" RenderInPageRoot="true">
    </telerik:RadToolTipManager>
    <div id="rfd-demo-zone">
        <div class="demo-containers">
            <div class="demo-container size-narrow">
                <h2>
                    Tooltips created by RadToolTipManager
                </h2>
                <asp:GridView ID="Grid1" runat="server" DataSourceID="SqlDataSource1" OnRowDataBound="Grid1_RowDataBound" AutoGenerateColumns="False" Width="100%">
                    <Columns>
                        <asp:BoundField HeaderText="Country" DataField="Country" ReadOnly="true" HeaderStyle-HorizontalAlign="Left"></asp:BoundField>
                        <asp:BoundField HeaderText="Customers count" DataField="CustomersCount" ReadOnly="true"
                            HeaderStyle-HorizontalAlign="Left"></asp:BoundField>
                    </Columns>
                </asp:GridView>
            </div>
            <div class="demo-container size-narrow">
                <h2>
                    Each row features a dedicated RadToolTip
                </h2>
                <asp:GridView ID="DataGrid1" AutoGenerateColumns="False" runat="server" DataSourceID="SqlDataSource1" Width="100%">
                    <Columns>
                        <asp:BoundField HeaderText="Country" DataField="Country" HeaderStyle-HorizontalAlign="Left"
                            ReadOnly="true"></asp:BoundField>
                        <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 RenderMode="Lightweight" 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>
                </asp:GridView>
            </div>
        </div>
    </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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance