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

Dynamic Tooltip Creation

This example demonstrates how you can create tooltips dynamically on the client by using the RadToolTipManager's client-side API and load their content by using a WebService.

The page contains a few countries' images and a RadToolTipManager's contol which does not have them added in its TargetControls collection when the page initially loads. Each image's onmouseover event is hooked up and in its handler a tooltip is shown by using the manager's API.

Note: The IgnoreAltAttribute property is introduced in the offical Q2 2010 release and it is not available in previous releases. When set to true, the tooltips ignore the alt attribute. The default value is false.

Mouseover the countries images to view the customers from each country.
  • DefaultCS.aspx
  • ToolTipWebService.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
</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" ID="RadToolTipManager1" Width="400px" Height="200px" ContentScrolling="Auto" HideEvent="ManualClose"
        RelativeTo="Element" Position="BottomCenter" runat="server" IgnoreAltAttribute="true">
        <WebServiceSettings Path="ToolTipWebService.asmx" Method="GetCustomersByCountryClientAPIExample"></WebServiceSettings>
    </telerik:RadToolTipManager>
    <div class="demo-container size-narrow">
        <asp:Repeater runat="server" ID="itemsRepeater" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                    ID="Image" onmouseover='telerikDemo.showToolTip(this);' runat="server" Width="150px" Height="150px"
                    class="country" alt=""></asp:Image>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings: NorthwindConnectionString %>"
        SelectCommand="SELECT DISTINCT TOP 9 Country FROM Customers"></asp:SqlDataSource>
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function() {
            telerikDemo.tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
        });
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance