Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / ToolTip / Change the RadToolTip loading animation

Change the RadToolTip loading animation

Article Info

Rating: 4

Article information

Article relates to

 RadToolTip for ASP.NET AJAX 

Created by

 Svetlina, Telerik


HOW-TO:

Change the default loading image when displaying a RadToolTip by using a RadToolTipManager

SOLUTION:




There are two common solutions for customizing the default loading animation - by using CSS and by using JavaScript means as explained below.

  1.  Use CSS

    In order to get the desired result you should include the image you want to display in the project and then override the default image set to the tooltip by using a style, similar to the below one:


     div.radtooltip_[Selected_Skin_Name] .ToolTipContent div.LoadingSign    
        {        
            background: url(ImageUrl) no-repeat center !important;     
            width: 100%;   
            height: 100%;   
            margin: -15px;  
        }    
         
  2. Use JavaScript

    When using JavaScript you should obtain a reference to the loading DIV element and set an image or custom text directly as shown below:

    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .MyLoadingSign  
        {  
            font:12px "Segoe UI", Arial, Verdana;
            padding-top: 40px;
            color:red;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
     
            <script type="text/javascript">  
        function OnClientShow(sender, args)  
        {  
           var test = $telerik.getElementByClassName($get("RadToolTipWrapper_" + sender.get_id()), "rtLoading", "td");  
           test.className = 'MyLoadingSign';  
           test.innerHTML = "<center>Custom Loading text here</center>" 
        }  
            </script> 
     
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <asp:HyperLink ID="link" runat="server">Show tooltip</asp:HyperLink> 
            <telerik:RadToolTipManager ID="manager" runat="server" AutoCloseDelay="100000" 
                Width="150" Height="150" OnAjaxUpdate="manager_AjaxUpdate" ManualClose="true" 
                OnClientShow="OnClientShow">  
                <TargetControls> 
                    <telerik:ToolTipTargetControl TargetControlID="link" /> 
                </TargetControls> 
            </telerik:RadToolTipManager> 
        </form> 
     

You can find two working projects which demonstrate the two explained above approaches in the attached archive files.

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.