RadToolTip - Telerik ASP.NET ToolTip

  • PositionBottom Center
  • RelativeToElement
  • RenderModeClassic
  • ShowEventOnMouseOver
  • ContentScrollingDefault
  • HideEventDefault
Isolate this demo as a stand-alone application

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.

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.
<%@ 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 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 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="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <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>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?