ToolTip

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadToolTip - Telerik's ASP.NET ToolTip

Put the mouse over each of the images below to show a RadToolTip which displays detailed information about the particular product.
Configure tooltips
  • Animation
  • AnimationDuration
  • Position
  • RelativeTo
  • ShowEvent
  • ContentScrolling
  • HideEvent
  • RenderMode
  • Title
  • Width (px)
  • Height (px)
  • OffsetX
  • OffsetY
  • AutoCloseDelay
  • ShowDelay
  • HideDelay
  • MouseTrailing
  • ShowCallout
  • Modal

tlrk.it/1dJgghl To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1dJgghl

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 80+ 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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular ToolTip demo, you can use the following path to find it in the sample website application:
tooltip/examples/overview

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

Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/ToolTip/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>ASP.NET AJAX ToolTip Demo | RadToolTip control</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <div class="bigModule" style="margin-bottom: 40px">
          <div class="bigModuleBottom">
               Put the mouse over each of the images below to show a RadToolTip which displays detailed
               information about the particular product.
          </div>
     </div>
     <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" Width="900px">
     <div style="padding: 40px 0 0 40px; float: left; width: 482px; height: 525px; background: url('bgr.gif') no-repeat;">
          <telerik:RadToolTipManager 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>
     <div style="padding-top: 10px; width: 900px;">
          <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure tooltips"
               Expanded="true" CssClass="configurator" HorizontalAlign="Left" Width="320">
               <ul class="config">
                    <li><span class="title">Animation </span>
                         <asp:DropDownList runat="server" ID="Animation" Style="width: 150px;">
                              <asp:ListItem Value="0">None</asp:ListItem>
                              <asp:ListItem Value="1">Resize</asp:ListItem>
                              <asp:ListItem Value="2">Fade</asp:ListItem>
                              <asp:ListItem Selected="true" Value="4">Slide</asp:ListItem>
                              <asp:ListItem Value="8">FlyIn</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">AnimationDuration</span>
                         <telerik:RadNumericTextBox MinValue="0" runat="server" EnabledStyle-HorizontalAlign="Right"
                              Width="150" ID="AnimationDuration" NumberFormat-DecimalDigits="0" AllowOutOfRangeAutoCorrect="true">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">Position </span>
                         <asp:DropDownList runat="server" ID="Position" Style="width: 150px;">
                              <asp:ListItem Value="TopLeft">Top Left</asp:ListItem>
                              <asp:ListItem Value="TopCenter">Top Center</asp:ListItem>
                              <asp:ListItem Value="TopRight">Top Right</asp:ListItem>
                              <asp:ListItem Value="MiddleLeft">Middle Left</asp:ListItem>
                              <asp:ListItem Value="Center">Center</asp:ListItem>
                              <asp:ListItem Value="MiddleRight">Middle Right</asp:ListItem>
                              <asp:ListItem Value="BottomLeft">Bottom Left</asp:ListItem>
                              <asp:ListItem Selected="true" Value="BottomCenter">Bottom Center</asp:ListItem>
                              <asp:ListItem Value="BottomRight">Bottom Right</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">RelativeTo</span>
                         <asp:DropDownList runat="server" ID="RelativeTo" Style="width: 150px;">
                              <asp:ListItem Value="Mouse">Mouse</asp:ListItem>
                              <asp:ListItem Selected="true" Value="Element">Element</asp:ListItem>
                              <asp:ListItem Value="BrowserWindow">BrowserWindow</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">ShowEvent</span>
                         <asp:DropDownList runat="server" ID="ShowEvent" Style="width: 150px;">
                              <asp:ListItem Selected="true" Value="OnMouseOver">OnMouseOver</asp:ListItem>
                              <asp:ListItem Value="OnClick">OnClick</asp:ListItem>
                              <asp:ListItem Value="OnRightClick">OnRightClick</asp:ListItem>
                              <asp:ListItem Value="OnFocus">OnFocus</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">ContentScrolling</span>
                         <asp:DropDownList runat="server" ID="ContentScrolling" Style="width: 150px;">
                              <asp:ListItem Value="Default" Selected="true">Default</asp:ListItem>
                              <asp:ListItem Value="Auto">Auto</asp:ListItem>
                              <asp:ListItem Value="None">None</asp:ListItem>
                              <asp:ListItem Value="X">X</asp:ListItem>
                              <asp:ListItem Value="Y">Y</asp:ListItem>
                              <asp:ListItem Value="Both">Both</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">HideEvent</span>
                         <asp:DropDownList runat="server" ID="HideEvent" Style="width: 150px;">
                              <asp:ListItem Selected="true" Value="Default">Default</asp:ListItem>
                              <asp:ListItem Value="FromCode">FromCode</asp:ListItem>
                              <asp:ListItem Value="LeaveTargetAndToolTip">LeaveTargetAndToolTip</asp:ListItem>
                              <asp:ListItem Value="LeaveToolTip">LeaveToolTip</asp:ListItem>
                              <asp:ListItem Value="ManualClose">ManualClose</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">RenderMode</span>
                         <asp:DropDownList runat="server" ID="RenderMode" Style="width: 150px;">
                              <asp:ListItem Selected="true" Value="Classic">Classic</asp:ListItem>
                              <asp:ListItem Value="Lightweight">Lightweight</asp:ListItem>
                         </asp:DropDownList>
                    </li>
                    <li><span class="title">Title</span>
                         <asp:TextBox runat="server" ID="Title" Columns="50" Style="width: 150px;"></asp:TextBox></li>
                    <li><span class="title">Width (px)</span>
                         <telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="Width" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">Height (px)</span>
                         <telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="Height" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">OffsetX</span>
                         <telerik:RadNumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="OffsetX" EnabledStyle-HorizontalAlign="Right" Width="150"
                              DataType="Int64">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">OffsetY</span>
                         <telerik:RadNumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="OffsetY" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">AutoCloseDelay</span>
                         <telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="AutoCloseDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">ShowDelay</span>
                         <telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="ShowDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">HideDelay</span>
                         <telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                              runat="server" ID="HideDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
                         </telerik:RadNumericTextBox></li>
                    <li><span class="title">MouseTrailing</span>
                         <asp:CheckBox runat="server" ID="MouseTrailing"></asp:CheckBox></li>
                    <li><span class="title">ShowCallout</span>
                         <asp:CheckBox runat="server" Checked="true" ID="ShowCallout"></asp:CheckBox></li>
                    <li><span class="title">Modal</span>
                         <asp:CheckBox runat="server" Checked="false" ID="Modal"></asp:CheckBox></li>
               </ul>
               <div style="float: right;">
                    <asp:Button ID="Button1" runat="server" Text="Configure Tooltips" Width="180px" OnClick="ConfigureTooltip">
                    </asp:Button>
               </div>
          </qsf:ConfiguratorPanel>
     </div>
     <div style="clear:both;"></div>
     </telerik:RadAjaxPanel>
     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
     <div class="qsf-overview-qr" style="clear: both;">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Tooltip.png" AlternateText="tlrk.it/1dJgghl" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1dJgghl">tlrk.it/1dJgghl</a>
    </div>
    </form>
</body>
</html>