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 & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Render In Page Root

Support & Learning Resources

Find Assistance