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

Tooltipify Specific Area

Tooltipified links in the "container1" zone

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis

Tooltipified appointments in the "RadScheduler1" zone

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lacinia euismod est. Suspendisse potenti. Phasellus nec sem id mauris feugiat lacinia. Ut purus leo, fringilla ut, vulputate ut, lobortis sit amet, mauris. Praesent id lacus vel urna viverra tempor. Ut interdum massa non neque. Etiam lobortis libero at justo. Curabitur enim mi, tincidunt sit amet, dapibus in, tristique vel, nisl. Nam adipiscing pede eu nibh. Cras nisl. Donec augue metus, feugiat nec, malesuada sed, interdum ac, metus. Aliquam felis mauris, elementum id, varius non, venenatis sit amet, nulla.
Quisque vestibulum. Ut non pede. Suspendisse ligula neque, auctor in, facilisis mollis, eleifend a, lectus. Sed id orci ac tortor varius pretium. Sed lectus arcu, posuere id, venenatis nec, laoreet vitae, elit. Vestibulum fermentum viverra nisi. Quisque scelerisque, nisi eget sodales placerat, neque quam aliquet tortor, quis consequat lacus neque et lorem. Vestibulum sed magna. Phasellus turpis. Sed sed massa eget turpis scelerisque porttitor. Duis vestibulum commodo urna. Proin placerat. Phasellus cursus ante nec quam tristique facilisis.
Show 24 hours...

By default, when the TargetControls collection of the RadToolTip manager is empty, the manager iterates through all elements on the page, finds the ones that have a Title/Tooltip attribute set and tooltipifies them. There are situations however, when you want to use this functionality for a particular element, rather than the whole page.

In order to tooltipify just a part of the page, all you need to do is add a RadToolTip manager to the page and set its ToolTipZoneID to the ClientID of the element, that wraps that part. This functionality is particularly useful when you want to tooltipify a control, that renders complex HTML - for example RadGrid or RadScheduler. Just adding the ID of such a control to the TargetControls collection of the RadToolTip manager will result in the manager tooltipifying only the HTML element with the same ClientID as the control (in most cases - the outer most HTML element), instead of tooltipifying its child controls with Title/Tooltip attributes.

Note, that when you set the ToolTipZoneID property of the RadToolTip manager and the TargetControls collection of the manager is not empty, the manager will tooltipify all elements, that are inside the element with ID specified as ToolTipZoneID and have a Title/ToolTip attribute set.

  • DefaultVB.aspx
  • AppointmentToolTip.ascx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.ToolTipZoneID.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Reference Control="AppointmentToolTip.ascx" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-containers" id="container1">
        <div class="demo-container">
            <h2>
                Tooltipified links in the "container1" zone
            </h2>
            <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" AutoTooltipify="true" ID="RadToolTipManager1"
                ToolTipZoneID="zone1" RelativeTo="Element" Width="150px">
            </telerik:RadToolTipManager>
            <div id="module">
                Lorem ipsum dolor sit amet,
                <a id="link1_module1" title="Lorem ipsum dolor sit amet, 
                consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
                laoreet dolore magna aliquam erat volutpat."
                href="#">consectetuer adipiscing</a>
                elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
                nulla facilisis at vero eros et accumsan et iusto odio
                <asp:HyperLink ID="link2_module1" ToolTip="Lorem ipsum dolor sit amet" runat="server"
                    NavigateUrl="#">dignissim</asp:HyperLink>
                dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
                nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
                doming id quod mazim placerat facer possim assum. Typi non
                <a runat="server" title="Lorem ipsum dolor sit amet" id="link3_module1" href="#">habent</a>
                claritatem insitam; est usus legentis
            </div>
        </div>
        <div class="demo-container">
            <h2>
                Tooltipified appointments in the "RadScheduler1" zone
            </h2>
            <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
                <ContentTemplate>
                    <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" EnableEmbeddedSkins="True"
                        TimeZoneOffset="03:00:00" SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00"
                        DataSourceID="AppointmentsDataSource" DataKeyField="ID" DataSubjectField="Subject"
                        DataStartField="Start" DataEndField="End" DisplayDeleteConfirmation="false" ReadOnly="true"
                        AllowInsert="false" AllowDelete="false" AllowEdit="false" OnClientAppointmentMoveStart="preventAppointmentDrag">
                    </telerik:RadScheduler>
                    <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTipManager2"
                        Animation="None" Position="BottomRight" HideEvent="LeaveToolTip" Text="Loading..."
                        Width="300" Height="150" AutoTooltipify="true" RelativeTo="Element" OnAjaxUpdate="RadToolTipManager2_AjaxUpdate">
                    </telerik:RadToolTipManager>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    <asp:SqlDataSource ID="AppointmentsDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT * FROM [AppointmentsWithLongSubjects]">
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance