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

    WebForms ToolTip Overview

    • Demo Configurator
    • PositionBottom Center
    • RelativeToElement
    • RenderModeLightweight
    • ShowEventOnMouseOver
    • ContentScrollingDefault
    • HideEventDefault

    About RadToolTip for ASP.NET AJAX

    Use your imagination and enrich the UX of your web project by using the Telerik ToolTip control - the perfect context-sensitive tool for displaying beautifully dynamic content, detailed information, overlaid forms, or just about anything that should appear over a given element OnMouseOver. The tooltip area is completely customizable and can be loaded on demand with ASP.NET AJAX using different animations or images.

    RadToolTip and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

    Key Features

    • Display HTML and ASP.NET
    • Add Tooltips to a Single or Multiple Elements
    • Load on Demand
    • Full Control over Tooltip Position
    • Show on Event
    • Close on Click
    • Mouse Trailing
    • Sticky Tooltips
    • Show Delay and AutoClose Delays
    • Animation effects
    • MS AJAX Update Panel in RadToolTip
    • Content scrolling
    • Advanced Skinning
    Put the mouse over each of the images below to show a RadToolTip which displays detailed information about the particular product.
    • DefaultCS.aspx
    • ProductDetails.ascx
    • DefaultCS.aspx.cs
      • DefaultCS.aspx.cs
      • ProductDetails.ascx.cs
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Overview.DefaultCS" %>
     
    <%@ Register Src="ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" UpdateInitiatorPanelsOnly="false" />
        <div class="demo-container no-bg">
            <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" AnimationDuration="300"
                                       ID="RadToolTipManager1" Width="480px" Height="227px" RelativeTo="Element"
                                       Animation="Slide" Position="BottomCenter" OnAjaxUpdate="OnAjaxUpdate">
            </telerik:RadToolTipManager>
            <asp:Repeater runat="server" ID="Repeater1" DataSourceID="SqlDataSource1" OnItemDataBound="repeater1_ItemDataBound">
                <ItemTemplate>
                    <div runat="server" id="smallImage" class="targetImage">
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                           ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(9) [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
            <SelectParameters>
                <asp:Parameter DefaultValue="8" Name="CategoryID" Type="Int32"></asp:Parameter>
            </SelectParameters>
        </asp:SqlDataSource>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance