This is a migrated thread and some comments may be shown as answers.

CssClass not defined

2 Answers 76 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Mario asked on 26 May 2009, 09:30 AM

Hi!

I'm just wondering why the CssClass-property on a ToolTip is not used?

At the moment you're doing this in the function _createUI in RadToolTip.js:

    
            rootDiv.className = this._getFullSkinName() + (this.get_showCallout() ? " rtVisibleCallout" : "") 

              + (isRightToLeft ? " RadToolTip_" + this._skin + "_rtl" : "");

But what I'd like to do (since I have diffrent tooltip-skins but with small variations) is to append my own cssclass to the rootDiv className.
Instead of creating three skins with small variations, I could append a css-class to the root of the tooltip, use one skin and create just the classes where I want to do my changes.

So let's say I have a class named "ExtendedTip", then
<div class="RadToolTip_MyName rtVisibleCallout">
would become
<div class="RadToolTip_MyName rtVisibleCallout ExtendedTip">
by setting the CssClass-property on the RadToolTip.

In code, this is what I want, more or less:

    
            ... 
        
            rootDiv.className = this._getFullSkinName() + (this.get_showCallout() ? " rtVisibleCallout" : "")  
        
                        + (isRightToLeft ? " RadToolTip_" + this._skin + "_rtl" : "")  
        
                        + this._getDefinedCssClass(); 
        
            ... 
        
            _getDefinedCssClass() : function() {  
        
             if (this._userDefinedCssClass != "") 
        
                return " " + this._userDefinedCssClass; 
        
            }

something like that.. I don't know.

It would save some CSS and bandwidth.

Best regards
Mario

2 Answers, 1 is accepted

Accepted

answered on 29 May 2009, 10:43 AM

Hi Mario,

You are correct that the CSSClass property is not implemented and only inherited for the RadToolTip control. However, we have not received many requests about it from our clients because most often people want their tooltips to look the same way.

In order to get the desired result, I suggest to set the desired class name to a custom attribute and append it in the OnClientShow handler as shown below:

    
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
                <style type="text/css">  
        
                .CustomClass1  
        
                {  
        
                   border: 3px solid red !important;  
        
                }  
        
                 .CustomClass2  
        
                {  
        
                   border: 3px solid green !important;  
        
                }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <script type="text/javascript">  
        
                    var oldClassName = null;  
        
                    function OnClientShow(sender, args)  
        
                    {  
        
                       var popupElement = sender.get_popupElement();  
        
                       var customClass = sender.get_element().getAttribute("MyCssClass");  
        
                       if(!oldClassName)  
        
                       {  
        
                           oldClassName =  popupElement.className;  
        
                       }  
        
                       popupElement.className = oldClassName + " " + customClass;  
        
                    }  
        
                    </script> 
        
                    <telerik:RadToolTip ID="RadToolTip1" RelativeTo="Element" OnClientShow="OnClientShow" 
        
                        Position="Center" Width="300" Height="300" runat="server" HideEvent="ManualClose" 
        
                        TargetControlID="target" MyCssClass="CustomClass1">  
        
                    </telerik:RadToolTip> 
        
                    <asp:HyperLink ID="target" runat="server" Text="Show ToolTip1"></asp:HyperLink> 
        
                    <br /> 
        
                    <br /> 
        
                    <br /> 
        
                    <br /> 
        
                    <br /> 
        
                    <br /> 
        
                    <telerik:RadToolTip ID="RadToolTip2" RelativeTo="Element" OnClientShow="OnClientShow" 
        
                        Position="Center" Width="300" Height="300" runat="server" HideEvent="ManualClose" 
        
                        TargetControlID="HyperLink1" MyCssClass="CustomClass2">  
        
                    </telerik:RadToolTip> 
        
                    <asp:HyperLink ID="HyperLink1" runat="server" Text="Show ToolTip2"></asp:HyperLink> 
        
                </form> 
        
            </body> 
        
            </html>

We will also be glad if you open a new support ticket and send us some explanations and screenshots of the desired result so that in case we find your scenario an important and common one we can consider implementing the property for the RadToolTip control.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

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

CssClass not defined

2 Answers, 1 is accepted