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

AJAX Request

Select category from the list

  • Beverages
  • Condiments
  • Confections
  • Dairy Products
  • Grains/Cereals
  • Meat/Poultry
  • Produce
  • Seafood
  • Chai
  • Chang
  • Guaraná Fantástica
  • Sasquatch Ale
  • Steeleye Stout
  • Côte de Blaye
  • Chartreuse verte
  • Ipoh Coffee
  • Laughing Lumberjack Lager
  • Outback Lager
  • Rhönbräu Klosterbier
  • Lakkalikööri

Both RadTooltip and RadTooltipManager can display rich content (including user controls and other ASP.NET controls).

RadTooltip

Rich content can be added to RadTooltip can be set to the tooltip in two ways:

1. Declaring it between the opening and closing tags, e.g.:

<telerik:RadToolTiprunat="server"ID="RadToolTip1"Width="250px" Height="300px">

2. Adding controls from the code-behind to the RadToolTip.Controls collection, e.g:

this.RadToolTip1.Controls.Add(newHtmlGenericControl("HR"));

RadTooltipManager

RadTooltipManager supports the OnAjaxUpdate event, which triggers an AJAX call to the server when the user moves the mouse over a particular tooltip element on the client.
The event handler receives the ID of the client element being hovered. This allows for dynamically loading and displaying rich data content for a particular element on demand.
The feature helps keep page sizes small and manageable, allowing for rich content to be sent to the client only if requested.

The elements for which RadTooltipManager will throw an AJAX event on the server must have their ClientID's added to the TargetControls collection.

< telerik:RadToolTipManager  runat ="server"
ID ="RadToolTipManager1"
Width ="250px"
Height ="300px"
Animation ="Resize"
OnAjaxUpdate ="OnAjaxUpdate">
     < TargetControls >
         < telerik:ToolTipTargetControl  TargetControlID ="Link1"  IsClientID ="true"  Value ="ValueForLink1"   />
        < telerik:ToolTipTargetControl  TargetControlID ="Link2"  IsClientID ="true"  Value ="ValueForLink2"   />
    </ TargetControls > 
</ telerik:RadToolTipManager >

Target controls can also be added from the codebehind in the following manner:

RadToolTipManager1.TargetControls.Add(image.ID) ; //The server ID is taken into consideration
RadToolTipManager1.TargetControls.Add(image.ClientID,  true ) ; //The client ID is taken into consideration
RadToolTipManager1.TargetControls.Add(image.ClientID,  "Value" ,  true ) ; //A specific value is  associated with this target
  • DefaultCS.aspx
  • ProductDetailsCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ProductDetailsCS.ascx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.LoadOnDemand.DefaultCS"    EnableEventValidation="false" ViewStateEncryptionMode="Never" EnableViewStateMac="false" %>

<%@ Register Src="ProductDetailsCS.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="styles.css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTipManager1" Position="Center"
        RelativeTo="Element" Width="400px" Height="240px" Animation="Resize" HideEvent="LeaveTargetAndToolTip"
        Skin="Default" OnAjaxUpdate="OnAjaxUpdate" OnClientHide="OnClientHide" RenderInPageRoot="true"
        AnimationDuration="200">
    </telerik:RadToolTipManager>
    <div class="demo-containers">
        <div class="demo-container size-thin no-bg">
            <p>
                Select category from the list
            </p>
            <div>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Height="230px" Width="250px"
                    DataSourceID="SqlDataSource2" DataTextField="CategoryName" AutoPostBack="true"
                    OnSelectedIndexChanged="ListBox_SelectedIndexChanged" DataValueField="CategoryID">
                </telerik:RadListBox>
            </div>
        </div>
        <div class="demo-container size-medium no-bg">
            <div class="wrapper">
                <ul>
                    <asp:Repeater ID="repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="Repeater1_ItemDataBound">
                        <ItemTemplate>
                            <li>
                                <div id="smallImage" runat="server">
                                    <div style="width: 130px; height: 130px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("ProductID", "../../../Img/Northwind/Products/Thumbs/{0}.jpg") %>');">
                                    </div>
                                </div>
                                <div style="height: 70px; width: 130px;">
                                    <hr style="width: 30px; margin-left: 10px; text-align: left;" />
                                    <asp:Label ID="lblName" runat="server" Style="margin-left: 10px; display: block; font-size: 11pt;"><%# Eval("ProductName")%></asp:Label>
                                </div>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Products] WHERE ([CategoryID] = @CategoryID2)">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadListBox1" Name="CategoryID2" PropertyName="SelectedValue"
                Type="Int32"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance