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

WebForms ToolTip Overview

  • Demo Configurator
  • General settings
  • Behavior Settings
  • Animation settings
  • 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<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