Tooltip vs Title attribute on Tabstrip

4 posts, 0 answers
  1. Mac
    Mac avatar
    36 posts
    Member since:
    Nov 2006

    Posted 27 Apr 2007 Link to this post

    Hi, just trying to get tooltips to work with tabs and so far no luck, it always just shows an empty tooltip

    first off the tooltip manager with no targeted controls - no dice
    second tried targeting the TabStrip control - no dice
    third tried targeting each tab by it's id (not client id) - no dice
    fourth tried without tooltip manager and referenced both tabstrip and individual tabs with tooltip control - no dice

    I guess that the problem lies in the fact that title is not a valid attribute for a tab control and the tooltip control does not access it's namesake attribute in the tab control.

    I haven't tried using ClientID's yet though..
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 03 May 2007 Link to this post


    Hi Mac,

    I created simple integration example with RadTooltip and RadTabStrip.There is a known problem with the tooltip width which I work around by adding:

    <style type="text/css">
    .tabstrip .radtooltip_Default
    {
    width: auto;
    }
    </style>

    <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">      
                .tabstrip .radtooltip_Default  
                {  
                    width: auto;  
                }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
         <asp:ScriptManager id="ScriptManager" runat="server" EnablePartialRendering="true"/>      
           <telerik:RadTooltipManager Animation="None" ID="RadTooltipManager1" runat="server" Width="100px"/>  
            <rad:RadTabStrip ID="RadTabStrip1" runat="server">  
                <Tabs> 
                    <rad:Tab ID="Tab1" Text="Tab1" ToolTip="Tab1"></rad:Tab> 
                    <rad:Tab ID="Tab2" Text="Tab2" ToolTip="Tab2"></rad:Tab> 
                    <rad:Tab ID="Tab3" Text="Tab3" ToolTip="Tab3"></rad:Tab> 
                </Tabs> 
            </rad:RadTabStrip>       
        </div> 
        </form> 
    </body> 
    </html> 

    I  believe it will help you.

    Best Regards,
    Petio Petkov
    the telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mac
    Mac avatar
    36 posts
    Member since:
    Nov 2006

    Posted 04 May 2007 Link to this post

    Hi Petio,

    Thanks for the example. I tried it and I can see it working. When I tried it in my page however it was still not appearing so I've modified the sample slightly to the point where I can no longer see tooltips.

    My tabstrip is contained with a RadPane (Prometheous RadSplitter so no @Register command on page fyi) so I added this to the example and it showed the tooltip correctly.

    I also have other controls within the radpane which I do not want tooltips to appear so I added a tooltiptargetcontrol tag. It is at this point that I can no longer see the tooltips.


    1 <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>    
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    3     
    4 <html xmlns="http://www.w3.org/1999/xhtml" >    
    5 <head id="Head1" runat="server">     
    6     <title>Untitled Page</title>    
    7     <style type="text/css">         
    8             .tabstrip .radtooltip_Default     
    9             {     
    10                 width: auto;     
    11             }     
    12     </style>    
    13 </head>    
    14 <body>    
    15     <form id="form1" runat="server">     
    16     <div>    
    17      <asp:ScriptManager id="ScriptManager" runat="server" EnablePartialRendering="true"/>    
    18        <telerik:RadTooltipManager Animation="None" ID="RadTooltipManager1" runat="server" Width="100px">  
    19            <TargetControls> 
    20                <telerik:ToolTipTargetControl TargetControlID="RadTabStrip1" /> 
    21            </TargetControls> 
    22        </telerik:RadTooltipManager> 
    23        <telerik:RadSplitter ID="splitTabMultiPage" runat="server" Orientation="Horizontal">  
    24             <telerik:RadPane ID="PaneTab" runat="server" Height="29" Scrolling="None">  
    25                 <rad:RadTabStrip ID="RadTabStrip1" runat="server">     
    26                     <Tabs>    
    27                         <rad:Tab ID="Tab1" Text="Tab1" ToolTip="Tab1"></rad:Tab>    
    28                         <rad:Tab ID="Tab2" Text="Tab2" ToolTip="Tab2"></rad:Tab>    
    29                         <rad:Tab ID="Tab3" Text="Tab3" ToolTip="Tab3"></rad:Tab>    
    30                     </Tabs>    
    31                 </rad:RadTabStrip> 
    32             </telerik:RadPane> 
    33         </telerik:RadSplitter> 
    34     </div>    
    35     </form>    
    36 </body>    
    37 </html>    
    38  

    Thanks
    Scott.
  5. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 04 May 2007 Link to this post


    Hi Mac,

    If you want to show Tabs tooltips, you must set their Id's in the RadTooltipManager TargetControls collection:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pages_Splitter_Temp_Default" %> 
    <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>       
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>       
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       
            
     <html xmlns="http://www.w3.org/1999/xhtml" >       
     <head id="Head1" runat="server">        
         <title>Untitled Page</title>       
         <style type="text/css">            
                 .tabstrip .radtooltip_Default        
                 {        
                     width: auto;        
                 }        
         </style>       
     </head>       
     <body>       
         <form id="form1" runat="server">        
         <div>       
          <asp:ScriptManager id="ScriptManager" runat="server" EnablePartialRendering="true"/>       
            <telerik:RadTooltipManager Animation="None" ID="RadTooltipManager1" runat="server" Width="100px">     
                <TargetControls>    
                    <telerik:ToolTipTargetControl TargetControlID="Tab1" />    
                     <telerik:ToolTipTargetControl TargetControlID="Tab2" />   
                      <telerik:ToolTipTargetControl TargetControlID="Tab3" />   
                </TargetControls>    
            </telerik:RadTooltipManager>    
            <telerik:RadSplitter ID="splitTabMultiPage" runat="server" Orientation="Horizontal">     
                 <telerik:RadPane ID="PaneTab" runat="server" Height="29" Scrolling="None">     
                     <rad:RadTabStrip ID="RadTabStrip1" runat="server">        
                         <Tabs>       
                             <rad:Tab ID="Tab1" Text="Tab1" ToolTip="Tab1"></rad:Tab>       
                             <rad:Tab ID="Tab2" Text="Tab2" ToolTip="Tab2"></rad:Tab>       
                             <rad:Tab ID="Tab3" Text="Tab3" ToolTip="Tab3"></rad:Tab>       
                         </Tabs>       
                     </rad:RadTabStrip>    
                 </telerik:RadPane>    
             </telerik:RadSplitter>    
         </div>       
         </form>       
     </body>       
     </html>      

    Do you have something else in mind?

    Kind regards,
    Petio Petkov
    the telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top