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

RadToolTip Client-side API

Name:
Company:
Languages:
E-mail:
Address:

Telerik RadToolTip provides a flexible client-side API that allows you to easily change the configuration in the browser

  1. Getting the RadToolTip client-side object:

    var tooltip = $find("RadToolTip1");

  2. Once you get the client-side object of RadToolTip, you can use the hide, show functions to hide or show the RadToolTip. Example:

    var tooltip = $find("RadToolTip1");
    tooltip.hide();
    tooltip.show();

  3. You can use the get_contentElement, set_contentElement functions to obtain a reference to the HTML element, holding the content of the RadToolTip or to set this element. Example:

    var tooltip = $find("RadToolTip1");
    var contentElement = tooltip.get_contentElement();
Click inside the Languages ListBox to see the available languages, from which you can choose. In order to view what information needs to be entered in the Address textbox, click in it. Push the Submit button to submit the form. Check the source code to see how the actions are implemented. See also the Client Side Events example.
  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<!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" />
    <div class="demo-container no-bg size-narrow">
        <div style="background: url(images/bg.gif) no-repeat; width: 350px; height: 300px; padding: 117px 0px 0px 43px;">
            <table style="font-size: 11px;">
                <tr>
                    <td>
                        <asp:Label ID="lblFirstName" runat="server" Text="Name: "></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName"
                            Text="!" ErrorMessage="The name is obligatory!">
                        </asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblCompany" runat="server" Text="Company: "></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvCompany" runat="server" ControlToValidate="txtCompany"
                            Text="!" ErrorMessage="The company name is obligatory!">
                        </asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLanguages" runat="server" Text="Languages: "></asp:Label>
                    </td>
                    <td>
                        <asp:ListBox ID="lbSelectedLanguages" runat="server" Width="151px">
                            <asp:ListItem Text="Click to select"></asp:ListItem>
                        </asp:ListBox>
                        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip3" HideEvent="FromCode" Position="MiddleRight"
                            Width="150px" Animation="Fade" ShowEvent="OnClick" ShowDelay="0"
                            RelativeTo="Element" TargetControlID="lbSelectedLanguages">
                            <asp:CheckBoxList ID="cblLanguages" runat="server" CellSpacing="0" CellPadding="0">
                                <asp:ListItem Text="English" Value="en"></asp:ListItem>
                                <asp:ListItem Text="German" Value="de"></asp:ListItem>
                                <asp:ListItem Text="French" Value="fr"></asp:ListItem>
                            </asp:CheckBoxList>
                            <asp:Button ID="Button1" runat="server" Text="Select" OnClientClick="telerikDemo.insertLanguages(); return false;"></asp:Button>
                        </telerik:RadToolTip>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblEmail" runat="server" Text="E-mail: "></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
                            Text="!" ErrorMessage="The email is obligatory!">
                        </asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblAddress" runat="server" Text="Address: "></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtAddress" CssClass="addressTextBox" runat="server"></asp:TextBox>
                        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip2" ShowEvent="OnClick" ShowDelay="0"
                            HideEvent="ManualClose" Width="300px" Position="MiddleRight" RelativeTo="Element"
                            TargetControlID="txtAddress">
                            <table>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblStreenNum" runat="server" Text="Street number:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtStreenNum" CssClass="addressField" runat="server" Text="275"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblStreet" runat="server" Text="Street name:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtStreet" CssClass="addressField" runat="server" Text="Grove St"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblCity" runat="server" Text="City:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtCity" runat="server" CssClass="addressField" Text="Newton"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblCountry" runat="server" Text="Country:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtCountry" runat="server" CssClass="addressField" Text="USA "></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="right">
                                        <asp:Button ID="btnInsertAddress" runat="server" Text="Insert Address" OnClientClick="telerikDemo.buildAddress(); return false;"></asp:Button>
                                    </td>
                                </tr>
                            </table>
                        </telerik:RadToolTip>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnSubmit" OnClientClick="telerikDemo.showTooltip()" Text="Submit" runat="server"
                            CssClass="button"></asp:Button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip1" Position="TopRight" HideEvent="ManualClose"
        ShowEvent="FromCode" Width="300px" RelativeTo="Element" OnClientBeforeShow="telerikDemo.checkIfShow"
        TargetControlID="btnSubmit">
        <asp:ValidationSummary ID="ValidationSummary1" runat="server"></asp:ValidationSummary>
    </telerik:RadToolTip>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            tooltip1ID: "<%=RadToolTip1.ClientID %>",
            tooltip2ID: "<%=RadToolTip2.ClientID %>",
            tooltip3ID: "<%=RadToolTip3.ClientID %>",
            summaryElemId: "<%=ValidationSummary1.ClientID %>",
            lbSelectedLanguagesElementId: "<%=lbSelectedLanguages.ClientID %>"
        });
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance