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

Set Target

Direct child of the form

ItemTemplate of a RadGrid column

CategoryIDCategoryName
1 Beverages
2 Condiments
3 Confections
4 Dairy Products
5 Grains/Cereals
6 Meat/Poultry
7 Produce
8 Seafood

UserControl

This example demonstrates three of the most common scenarios when the TargetControlID of the RadToolTip control is useful - the following ones:

  1. You have a control, that is a direct child of the form and you want to show a RadToolTip for it.
  2. You have a control in an ItemTemplate of a RadGrid column and you want to show a RadToolTip for it.
  3. You have a control in a UserControl and you want to show a RadToolTip for it.
Setting TargetControlID for a RadToolTip (click inside the TextBox to show the RadToolTip):
  • DefaultVB.aspx
  • ToolTipUserControl.ascx
<%@ Page Language="vb"  %>

<%@ Register Src="ToolTipUserControl.ascx" TagName="ToolTipUserControl" TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <h2>Direct child of the form</h2>
            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="TextBox1" Text="Show RadToolTip"></telerik:RadTextBox>
            <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" TargetControlID="TextBox1" ShowEvent="OnClick"
                                Position="MiddleRight" RelativeTo="Element">
                RadToolTip
            </telerik:RadToolTip>
        </div>
        <div class="demo-container size-thin">
            <h2>ItemTemplate of a RadGrid column</h2>
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None"
                             Width="300px">
                <GroupPanel ID="GroupPanel" Style="width: 100%;">
                </GroupPanel>
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn Resizable="False" Visible="False">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="CategoryID" DataType="System.Int32" HeaderText="CategoryID"
                                                 ReadOnly="True" SortExpression="CategoryID" UniqueName="CategoryID">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName"
                                                    UniqueName="CategoryName">
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CategoryName") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CategoryName") %>'>
                                </asp:Label>
                                <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" TargetControlID="Label1" Width="150px"
                                                    RelativeTo="Element" Position="MiddleRight">
                                <%# DataBinder.Eval(Container, "DataItem.Description") %>
                                </telerik:RadToolTip>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <EditFormSettings>
                        <PopUpSettings ScrollBars="None"></PopUpSettings>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                               ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"></asp:SqlDataSource>
        </div>
        <div class="demo-container size-thin">
            <h2>UserControl</h2>
            <table>
                <tr>
                    <td>
                        <uc1:ToolTipUserControl ID="ToolTipUserControl6" Text="Name" Description="Please, fill in first name, familiy name and any other initials or titles."
                                                runat="server"></uc1:ToolTipUserControl>
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:ToolTipUserControl ID="ToolTipUserControl1" Text="Company" Description="Company name should be spelled out with proper capitalization."
                                                runat="server"></uc1:ToolTipUserControl>
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:ToolTipUserControl ID="ToolTipUserControl2" Text="E-mail" Description="It is possible to list more than one email, separated by comma."
                                                runat="server"></uc1:ToolTipUserControl>
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:ToolTipUserControl ID="ToolTipUserControl3" Text="Position" Description="Please list current position, followed by previous positions at the company, separated by commas."
                                                runat="server"></uc1:ToolTipUserControl>
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:ToolTipUserControl ID="ToolTipUserControl4" Text="Address" Description="Your current snail mail adrress."
                                                runat="server"></uc1:ToolTipUserControl>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br />
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="btnSubmit" Text="Submit" runat="server"></telerik:RadButton>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance