Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

ToolTip / Tooltipify Specific Area

When you use ToolTipZoneID and the TargetControls collection of the RadToolTip manager is empty, the manager tooltipifies all elements, that are inside the element with ID specified as ToolTipZoneID.
Hover on the links to show the RadToolTips the "RadToolTipManager1" manager creates for the "module1" 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


Hover on the Appointments to show the RadToolTips the "RadToolTipManager2" manager creates for the "RadScheduler1" zone.

previous daynext daytoday

Select date
<<<April 2012>>>
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     

Monday, April 16, 2012

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.delete
 
 
 
 
 
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.delete
 
 
 
 
 
 
 
 
 
Show 24 hours...

  • ToolTipZoneID


    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 partucularly 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.

Source Code

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

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
    <%@ Reference Control="AppointmentToolTip.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
            <div class="bigModule" style="margin-bottom: 40px">
                <div class="bigModuleBottom">
                    When you use ToolTipZoneID and the TargetControls collection of the RadToolTip manager
                    is empty, the manager tooltipifies all elements, that are inside the element with
                    ID specified as ToolTipZoneID.
                </div>
            </div>
        <telerik:RadToolTipManager runat="server" AutoTooltipify="true" ID="RadToolTipManager1"
            ToolTipZoneID="module" RelativeTo="Element" Width="150px" >
        </telerik:RadToolTipManager>
        <div id="module" class="module">
            <div class="bigModule" style="margin-bottom: 40px">
                <div class="bigModuleBottom">
                    <strong>Hover on the links to show the RadToolTips the "RadToolTipManager1" manager
                        creates for the "module1" zone.</strong>
                </div>
            </div>
            <br />
            <hr style="height: 1px" />
            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>
        <br />
        <br />

        <script type="text/javascript">
            //<![CDATA[
                function hideActiveToolTip()
                {            
                    var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                    if (tooltip)
                    {
                        tooltip.hide();
                    }
                }
                
                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
                function beginRequestHandler(sender, args)
                {
                    var prm = Sys.WebForms.PageRequestManager.getInstance();
                    if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1)
                    {
                        hideActiveToolTip();
                    }
                }
            //]]>
        </script>

            <div class="bigModule" style="margin-bottom: 40px">
                <div class="bigModuleBottom">
                    <strong>Hover on the Appointments to show the RadToolTips the "RadToolTipManager2" manager
                        creates for the "RadScheduler1" zone.</strong>
                </div>
            </div>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" 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">
                </telerik:RadScheduler>
                <telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" ToolTipZoneID="RadScheduler1"
                    Animation="None" Position="BottomRight" HideEvent="LeaveToolTip" Text="Loading..."
                    Width="300" Height="150" AutoTooltipify="true" RelativeTo="Element" OnAjaxUpdate="RadToolTipManager2_AjaxUpdate" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <sds:SessionDataSource ID="AppointmentsDataSource" runat="server" DisplayWarning="false"
            PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT * FROM [AppointmentsWithLongSubjects]" InsertCommand="INSERT INTO [AppointmentsWithLongSubjects] ([Subject], [Start], [End]) VALUES (@Subject, @Start, @End)"
            UpdateCommand="UPDATE [AppointmentsWithLongSubjects] SET [Subject] = @Subject, [Start] = @Start, [End] = @End WHERE (ID = @ID)"
            DeleteCommand="DELETE FROM [AppointmentsWithLongSubjects] WHERE [ID] = @ID">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="ID" Type="Int32" />
                <asp:Parameter Name="Subject" Type="String" />
                <asp:Parameter Name="Start" Type="DateTime" />
                <asp:Parameter Name="End" Type="DateTime" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="Subject" Type="String" />
                <asp:Parameter Name="Start" Type="DateTime" />
                <asp:Parameter Name="End" Type="DateTime" />
            </InsertParameters>
        </sds:SessionDataSource>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451