ToolTip - Render In Page Root

  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
  • customer
    

Demo Configurator


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

By default when you declare a RadToolTip it is created and added to the DOM where it is actually declared. However, in some cases it should be added as a child of the <form> element. In order to control where the tooltip element is added you can use the RenderInPageRoot property - when it is set to true, the tooltip is added as a child of the root element.

Use the radio buttons to toggle the value of the RenderInPageRoot property and hover the images to see the result - the tooltips will not be shown because their direct parents override their visibility and position settings
  • DefaultCS.aspx
  • Information.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • Information.ascx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ToolTipAsFormChild.DefaultCS" %>

<%@ Register Src="Information.ascx" TagName="Information" TagPrefix="uc1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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">
    <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" />
    <div class="demo-container size-medium">
        <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="itemsRotator" Width="610" Height="120" RotatorType="AutomaticAdvance"
            PauseOnMouseOver="true" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRotator_ItemDataBound">
            <ItemTemplate>
                <div id="Image" runat="server">
                    <img class="customerImage" src="<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>" alt="customer" />
                </div>
                <telerik:RadToolTip RenderMode="Lightweight" runat="server" Width="400" RenderInPageRoot="true" ShowEvent="OnMouseOver"
                    HideEvent="LeaveTargetAndToolTip" ID="RadToolTip1" Position="TopRight" Animation="Resize"
                    RelativeTo="element">
                </telerik:RadToolTip>
            </ItemTemplate>
        </telerik:RadRotator>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Customers] WHERE Country = 'Argentina' OR
            Country = 'Austria' OR Country = 'Belgium' OR Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland'
            OR Country = 'Mexico' OR Country = 'Norway'"></asp:SqlDataSource>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Value="false">RenderInPageRoot = "false" (default value)</asp:ListItem>
                                <asp:ListItem Value="true" Selected="True">RenderInPageRoot = "true"</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?