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 Q2 2011 released 07/12/2011
select

ToolTip / Relative to

This example demonstrates positioning the tooltip relative to target element, mouse or browser

Lorem ipsum dolor sit amet, ToolTip target control


Configure tooltips


Press the button to show the tooltip using its current settings

  • RelativeTo property


    Positioning a RadToolTip relative to the browser window (instead of to the mouse or to an element) is very useful in some scenarios. In this manner different styles can be built, for example an Outlook one, in which the tooltip is shown in the right bottom area of the browser.
    This can be easily done by setting the RadToolTip's RelativeTo property to BrowserWindow and the Position property to the desired value.
    A lot of configuration combinations are possible and it is important to know the following rules by which the tooltip determines how and when to be shown:

    1. The default scenario is when the RadToolTip has its TargetControlID set and also has these settings: RelativeTo="Mouse" or MouseTrailing = "true". In this case its position is calculated according to the mouse coordinates.
    2. The setting RelativeTo=BrowserWindow has a highest priority - the RadToolTip is shown relative to the browser, not to a target control even if a TargetControlID has been specified.
    3. If the TargetControlID is not set and the ShowEvent is "FromCode" then the tooltip is positioned relative to the browser window. The OffsetX and OffsetY values are calculated using the browser corner (based on the Position property setting).
    4. If the TargetControlID is set and the ShowEvent is "FromCode" the tooltip's position is calculated relative to the element.
    5. If the tooltip has RelativeTo="Mouse" and TargetControl is set, and yet its showing is invoked programmatically from code the tooltip is positioned relative to the target element.
    6. If the tooltip has RelativeTo="Element" and TargetControl is set, its position is calculated according to the specified element.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.RelativeTo.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" %>
    <!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" />
        <style type="text/css">
            .controlsList
            {
                padding: 0;
                margin: 0;
                margin-top: 24px;
                list-style: none;
            }
            .controlsList li
            {
                clear: both;
                margin-bottom: 6px;
                line-height: 22px;
            }
            .controlsList label
            {
                display: block;
                float: left;
                width: 120px;
            }
            .controlsList select
            {
                width: 200px;
            }
        </style>
    </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">
                This example demonstrates positioning the tooltip relative to target element, mouse
                or browser
            </div>
        </div>
        <div class="module" style="width: 400px; margin-top: 18px;">
            <br />
            Lorem ipsum dolor sit amet,
            <asp:HyperLink ID="link1" runat="server" NavigateUrl="#">ToolTip target control</asp:HyperLink>
            <br />
            <br />
        </div>
        <br />
        <div>
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure tooltips"
                Expanded="true" HorizontalAlign="Right" Width="530">
                <ul class="controlsList">
                    <li>
                        <label for="RelativeToSelector">
                            Relative to</label>
    <asp:DropDownList AutoPostBack="true" ID="RelativeToSelector" runat="server" OnSelectedIndexChanged="RelativeToSelector_SelectedIndexChanged"
    Style="display: block; float: left; margin-left: 30px;">
                            <asp:ListItem Text="Mouse" Value="Mouse"></asp:ListItem>
                            <asp:ListItem Text="Element" Value="Element"></asp:ListItem>
                            <asp:ListItem Selected="True" Text="BrowserWindow" Value="BrowserWindow"></asp:ListItem>
                        </asp:DropDownList>
                        <label for="UseTargetControl" style="padding-left: 8px;">
                            Use TargetControl</label>
                        <asp:CheckBox ID="UseTargetControl" runat="server" />

                        <script type="text/javascript">
                                $get('<%=UseTargetControl.ClientID %>').disabled = true;
                        </script>

                    </li>
                    <li>
                        <label for="PositionSelector">
                            Position:</label>
    <asp:DropDownList runat="server" Style="margin-left: 30px; float: left" AutoPostBack="true"
    ID="PositionSelector" OnSelectedIndexChanged="PositionSelector_SelectedIndexChanged">
                            <asp:ListItem Value="32">Default</asp:ListItem>
                            <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 Value="BottomCenter">Bottom Center</asp:ListItem>
                            <asp:ListItem Selected="true" Value="BottomRight">Bottom Right</asp:ListItem>
                        </asp:DropDownList>
                    </li>
                    <li>
                        <label for="AnimationSelector">
                            Animation</label>
    <asp:DropDownList runat="server" Style="margin-left: 30px; float: left" AutoPostBack="true"
    ID="AnimationSelector" OnSelectedIndexChanged="AnimationSelector_SelectedIndexChanged">
                            <asp:ListItem Value="0">None</asp:ListItem>
                            <asp:ListItem Value="1">Resize</asp:ListItem>
                            <asp:ListItem Value="2">Fade</asp:ListItem>
                            <asp:ListItem Value="4" Selected="True">Slide</asp:ListItem>
                            <asp:ListItem Value="8">FlyIn</asp:ListItem>
                        </asp:DropDownList>
                    </li>
                    <li>
                        <label for="ShowEventSelector">
                            ShowEvent</label>
    <asp:DropDownList runat="server" Style="margin-left: 30px; float: left" AutoPostBack="true"
    ID="ShowEventSelector" OnSelectedIndexChanged="ShowEventSelector_SelectedIndexChanged">
                            <asp:ListItem Selected="True" Value="OnMouseOver">OnMouseOver</asp:ListItem>
                            <asp:ListItem Value="OnRightClick">OnRightClick</asp:ListItem>
                            <asp:ListItem Value="OnClick">OnClick</asp:ListItem>
                            <asp:ListItem Value="OnFocus">OnFocus</asp:ListItem>
                            <asp:ListItem Value="FromCode">FromCode</asp:ListItem>
                        </asp:DropDownList>
                    </li>
                    <li>
                        <label for="VisibleOnPageLoad">
                            Visible On Page Load</label>
    <asp:CheckBox ID="VisibleOnPageLoad" runat="server" Style="margin-left: 30px; float: left"
    AutoPostBack="true" Checked="true" />
                    </li>
                </ul>
                <ul class="controlsList">
                    <li>
                        <label for="ShowCallout">
                            Show Callout</label>
    <asp:CheckBox ID="ShowCallout" Style="margin-left: 30px; float: left" runat="server"
    AutoPostBack="true" OnCheckedChanged="ShowCallout_CheckedChanged" />
                    </li>
                    <li>
                        <label for="CheckBoxModal">
                            Modal</label>
    <asp:CheckBox ID="CheckBoxModal" runat="server" Style="margin-left: 30px; float: left"
    AutoPostBack="true" OnCheckedChanged="CheckBoxModal_CheckedChanged" />
                    </li>
                </ul>
                <telerik:RadToolTip runat="server" ID="RadToolTip1" Width="280px" Height="70px" TargetControlID="link1"
                    OffsetX="0" OffsetY="0" EnableShadow="true" IsClientID="true" EnableViewState="true" ShowCallout="false">
                    <br />
                    <img src="../../../ToolTip/Img/ToolTip.png" alt="&nbsp;" />
                </telerik:RadToolTip>
            </qsf:ConfiguratorPanel>
            <br />
            <br />
            <fieldset style="width: 500px;">
                <legend>Press the button to show the tooltip using its current settings</legend>
                <button onclick="showToolTip();return false;" class="button" style="display: block;
                    margin: 12px; width: 200px;" title="Press the button to show the tooltip using its current settings">
                    Show Tooltip</button>
            </fieldset>

            <script type="text/javascript">
                function showToolTip()
                {
                    var tooltip = $find("<%=RadToolTip1.ClientID%>");
                    window.setTimeout(function(){tooltip.show();}
                    ,1);
                }
            </script>

        </div>
        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451