Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ToolTip / RadToolTip Client-side API

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.
Name:
Company:
Languages:
E-mail:
Address:

  • Client-Side API


    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();
			    tooltip.set_contentElement(contentElement);

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ClientSideAPI.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

        <script type="text/javascript">
         //<![CDATA[
         function HideTooltip()
         {    
         var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
               if (tooltip) tooltip.hide();
         }
        
         function ShowTooltip()
         {
         window.setTimeout(function()
         {         
                    var tooltip = $find("RadToolTip1");
                    //API: show the tooltip
                    tooltip.show();                   
         }, 10);
         }
        
         function CheckIfShow(sender, args)
         {
                var summaryElem = document.getElementById("ValidationSummary1");
                 
                //check if summary is visible
                if (summaryElem.style.display == "none")
                {
                    //API: if there are no errors, do not show the tooltip
                    args.set_cancel(true);
                }
         }
        
         function BuildAddress()
         {    
         var street = (document.getElementById("txtStreet")).value;
         var streetNumber = (document.getElementById("txtStreenNum")).value;
         var city = (document.getElementById("txtCity")).value;
         var country = (document.getElementById("txtCountry")).value;
         var address = streetNumber + " " + street + ", " + city + ", " + country;
         (document.getElementById("txtAddress")).value = address;    
        
         var tooltip = $find("RadToolTip2");
         //API: hide the tooltip
         tooltip.hide();
         }
        
         function InsertLanguages()
         {    
         var tooltip = $find("RadToolTip3");
         //API: get the html element, holding the content of the tooltip
         var contentElement = tooltip.get_contentElement();
        
         var checkboxes = contentElement.getElementsByTagName("INPUT");
         var list = document.getElementById("lbSelectedLanguages");
         //empty the listBox of selected languages
         list.options.length = 0;
        
         for(var index=0; index < checkboxes.length; index++)
         {
         var checkbox = checkboxes[index];
         if (checkbox.checked)
         {
         var content = checkbox.nextSibling.innerHTML;
         var option = new Option(content, content);
         //if the checkbox is checked, create and add a new option to the listBox of selected languages
         list.options[list.options.length] = option;
         }    
         }    
         //API: hide the tooltip
         tooltip.hide();
         }
         //]]>
        </script>

            <div class="bigModule" style="margin-bottom: 40px">
                <div class="bigModuleBottom">
                    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.
                </div>
            </div>
        <div style="background: url(Img/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 runat="server" ID="RadToolTip3" HideEvent="FromCode" Position="MiddleRight"
                            Width="150px" Height="70px" Animation="Fade" ShowEvent="OnClick" ShowDelay="0"
                            RelativeTo="Element" TargetControlID="lbSelectedLanguages" EnableShadow="true">
                            <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="InsertLanguages(); return false;" />
                        </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" runat="server"></asp:TextBox>
                        <telerik:RadToolTip runat="server" ID="RadToolTip2" ShowEvent="OnClick" ShowDelay="0"
                            HideEvent="ManualClose" Width="300px" Position="MiddleRight" RelativeTo="Element"
                            TargetControlID="txtAddress" EnableShadow="true">
                            <table>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblStreet" runat="server" Text="Street name:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtStreet" runat="server" Text="Grove St"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblStreenNum" runat="server" Text="Street number:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtStreenNum" runat="server" Text="275"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblCity" runat="server" Text="City:"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtCity" runat="server" 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" Text="USA "></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="right">
                                        <asp:Button ID="btnInsertAddress" runat="server" Text="Insert Address" OnClientClick="BuildAddress(); return false;" />
                                    </td>
                                </tr>
                            </table>
                        </telerik:RadToolTip>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
    <asp:Button ID="btnSubmit" OnClientClick="ShowTooltip()" Text="Submit" runat="server"
    CssClass="button" />
                    </td>
                </tr>
            </table>
        </div>
        <telerik:RadToolTip runat="server" ID="RadToolTip1" Position="TopRight" HideEvent="ManualClose"
            ShowEvent="FromCode" Width="300px" RelativeTo="Element" EnableShadow="true" OnClientBeforeShow="CheckIfShow"
            TargetControlID="btnSubmit">
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        </telerik:RadToolTip>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451