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

Relative to

ToolTip target control

  • Demo Configurator
  • BrowserWindow
  • Bottom Right
  • Slide
  • OnMouseOver

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.
This example demonstrates positioning the tooltip relative to target element, mouse or browser
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.RelativeTo.DefaultCS" %>

<!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>
</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" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
    <div class="demo-container size-thin">
        <p>
            <asp:HyperLink ID="link1" runat="server" NavigateUrl="javascript:void(0);">ToolTip target control</asp:HyperLink>
        </p>
        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip1" Width="280px" Height="70px" OffsetX="0"
            OffsetY="0" IsClientID="false" EnableViewState="true" ShowCallout="false" RenderInPageRoot="true">
            <img src="../../../ToolTip/images/ToolTip.png" alt="&nbsp;" />
        </telerik:RadToolTip>
        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Text="Show Tooltip" OnClientClicked="showToolTip" AutoPostBack="false"></telerik:RadButton>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <label for="RelativeToSelector" class="label">Relative to:</label>
                            <qsf:DropDownList Size="Auto" AutoPostBack="true" ID="RelativeToSelector" runat="server" OnSelectedIndexChanged="RelativeToSelector_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="Mouse" Value="Mouse"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Element" Value="Element"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Selected="True" Text="BrowserWindow" Value="BrowserWindow"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>

                        </li>
                        <li>
                            <label class="label" for="PositionSelector">Position:</label>
                            <qsf:DropDownList Size="Auto" runat="server" AutoPostBack="true" ID="PositionSelector" OnSelectedIndexChanged="PositionSelector_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Value="32" Text="Default"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopLeft" Text="Top Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopCenter" Text="Top Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopRight" Text="Top Right"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MiddleLeft" Text="Middle Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Center" Text="Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MiddleRight" Text="Middle Right"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomLeft" Text="Bottom Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomCenter" Text="Bottom Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Selected="true" Value="BottomRight" Text="Bottom Right"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <label for="AnimationSelector" class="label">Animation</label>
                            <qsf:DropDownList Size="Auto" runat="server" AutoPostBack="true" ID="AnimationSelector" OnSelectedIndexChanged="AnimationSelector_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Value="0" Text="None"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="1" Text="Resize"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2" Text="Fade"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Selected="True" Text="Slide"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="8" Text="FlyIn"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>    
                            <label for="ShowEventSelector" class="label">ShowEvent</label>
                            <qsf:DropDownList Size="Auto" runat="server" AutoPostBack="true" ID="ShowEventSelector" OnSelectedIndexChanged="ShowEventSelector_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Selected="True" Value="OnMouseOver" Text="OnMouseOver"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="OnRightClick" Text="OnRightClick"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="OnClick" Text="OnClick"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="OnFocus" Text="OnFocus"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="FromCode" Text="FromCode"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group checkbox-list">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox Text="Visible On Page Load" ID="VisibleOnPageLoad" runat="server" AutoPostBack="true" Checked="true"></asp:CheckBox></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox Text="Show Callout" ID="ShowCallout" AutoPostBack="true" runat="server" OnCheckedChanged="ShowCallout_CheckedChanged"></asp:CheckBox></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox Text="Modal" ID="CheckBoxModal" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxModal_CheckedChanged"></asp:CheckBox></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox Text="Relative to Uses TargetControl" ID="UseTargetControl" runat="server" Enabled="false" /></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <script type="text/javascript">
        //<![CDATA[
        $relativeToDemo.tooltipID = "<%=RadToolTip1.ClientID%>"; 
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance