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

Render In Page Root

Name: Ana Trujillo Company Name: Ana Trujillo Emparedados y helados Contact Title: Owner Address: Avda. de la Constitución 2222 City: México D.F. Country: Mexico
Name: Antonio Moreno Company Name: Antonio Moreno Taquería Contact Title: Owner Address: Mataderos 2312 City: México D.F. Country: Mexico
Name: Elizabeth Lincoln Company Name: Bottom-Dollar Markets Contact Title: Accounting Manager Address: 23 Tsawassen Blvd. City: Tsawassen Country: Canada
Name: Patricio Simpson Company Name: Cactus Comidas para llevar Contact Title: Sales Agent Address: Cerrito 333 City: Buenos Aires Country: Argentina
Name: Francisco Chang Company Name: Centro comercial Moctezuma Contact Title: Marketing Manager Address: Sierras de Granada 9993 City: México D.F. Country: Mexico
Name: Roland Mendel Company Name: Ernst Handel Contact Title: Sales Manager Address: Kirchgasse 6 City: Graz Country: Austria
Name: Yoshi Tannamuri Company Name: Laughing Bacchus Wine Cellars Contact Title: Marketing Assistant Address: 1900 Oak St. City: Vancouver Country: Canada
Name: Catherine Dewey Company Name: Maison Dewey Contact Title: Sales Agent Address: Rue Joseph-Bens 532 City: Bruxelles Country: Belgium
Name: Jean Fresnière Company Name: Mère Paillarde Contact Title: Marketing Assistant Address: 43 rue St. Laurent City: Montréal Country: Canada
Name: Yvonne Moncada Company Name: Océano Atlántico Ltda. Contact Title: Sales Agent Address: Ing. Gustavo Moncada 8585 Piso 20-A City: Buenos Aires Country: Argentina
Name: Guillermo Fernández Company Name: Pericles Comidas clásicas Contact Title: Sales Representative Address: Calle Dr. Jorge Cash 321 City: México D.F. Country: Mexico
Name: Georg Pipps Company Name: Piccolo und mehr Contact Title: Sales Manager Address: Geislweg 14 City: Salzburg Country: Austria
Name: Sergio Gutiérrez Company Name: Rancho grande Contact Title: Sales Representative Address: Av. del Libertador 900 City: Buenos Aires Country: Argentina
Name: Jonas Bergulfsen Company Name: Santé Gourmet Contact Title: Owner Address: Erling Skakkes gate 78 City: Stavern Country: Norway
Name: Jytte Petersen Company Name: Simons bistro Contact Title: Owner Address: Vinbæltet 34 City: Kobenhavn Country: Denmark
Name: Pascale Cartrain Company Name: Suprêmes délices Contact Title: Accounting Manager Address: Boulevard Tirou, 255 City: Charleroi Country: Belgium
Name: Miguel Angel Paolino Company Name: Tortuga Restaurante Contact Title: Owner Address: Avda. Azteca 123 City: México D.F. Country: Mexico
Name: Palle Ibsen Company Name: Vaffeljernet Contact Title: Sales Manager Address: Smagsloget 45 City: Århus Country: Denmark
Name: Pirkko Koskitalo Company Name: Wartian Herkku Contact Title: Accounting Manager Address: Torikatu 38 City: Oulu Country: Finland
Name: Matti Karttunen Company Name: Wilman Kala Contact Title: Owner/Marketing Assistant Address: Keskuskatu 45 City: Helsinki Country: Finland

Demo Configurator

- RenderInPageRoot = "false" (default value)
- RenderInPageRoot = "true"

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

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

<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.ToolTipAsFormChild.DefaultVB" %>

<%@ Register Src="Information.ascx" TagName="Information" TagPrefix="uc1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <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>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Render In Page Root

Support & Learning Resources

Find Assistance