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

Tooltip Hides behind RadDockZone in Firefox

7 Answers 74 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
blara
Top achievements
Rank 1
blara asked on 17 Jun 2008, 09:49 PM

Hello:

It works fine in IE and Safari, but in Firefox, the Tooltip hides (cropped) behind the User Control in RadDockZone. I am using ASP.NET AJAX controls. I tried setting z-index to a high value (9999) for the Tooltip, but that did not help. Any help will be much appreciated.

Thanks,

7 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 18 Jun 2008, 11:55 AM
Hi blara,

I tried to reproduce the problem but to no avail. Please open a support ticket and provide us with a small sample project that shows the reported behavior - we will check it and get back to you right away.



Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Gabriel Beauchamp
Top achievements
Rank 2
answered on 27 Jun 2008, 06:03 PM
I have the same issue.

In fact it crops under the RadDockZone in both IE 7 and Firefox. Here is a sample WebPage showing the bug.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
   
        <telerik:RadDockLayout ID="Layout1" runat="server">
        <div>
            <telerik:RadDockZone ID="Zone1" runat="server" Width="500" Height="500">
                <telerik:RadDock ID="Dock1" runat="server" Title="Test Dock" Height="250" Width="250">
                    <ContentTemplate>
                        <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" Modal="true" TargetControlID="HyperLink1">
                            Hello from inside the tooltip
                        </telerik:RadToolTip>
                        <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </div>
        </telerik:RadDockLayout>
   
    </form>
</body>
</html>

0
Svetlina Anati
Telerik team
answered on 30 Jun 2008, 04:29 PM
Hi Gabriel,

I tested the provided code and the only problem I noticed is that the modal background is applied only in the RadDock. You have set the RadToolTip's Modal property to true and that is why I assume that you want to show a modal RadToolTip above the whole page.

If my assumption is correct I suggest to put the RadToolTip outside the RadDock and to use the target control's ClientID as shown below:

 <telerik:RadDockLayout ID="Layout1" runat="server">  
            <div> 
                <telerik:RadDockZone ID="Zone1" runat="server" Width="500" Height="500">  
                    <telerik:RadDock ID="Dock1" runat="server" Title="Test Dock" Height="250" Width="250">  
                        <ContentTemplate> 
                            <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" /> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
                <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                    Position="Center" Modal="true" IsClientID="true" TargetControlID="<%# HyperLink1.ClientID%>">  
                    Hello from inside the tooltip  
                </telerik:RadToolTip> 
            </div> 
        </telerik:RadDockLayout> 

Please, note that in order to evaluate the TargetControlID expression you should call the RadToolTip's DataBind method in the code-behind:

   protected void Page_Load(object sender, EventArgs e)  
    {  
        RadToolTip1.DataBind();  
    } 

For your convenience I attached a sample demo project.

In case I have not understand you correctly, please open a new support ticket and send me a sample demo along with a detailed explanation of the desired behavior and some screenshots. One I receive it I will do my best to help.


Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Gabriel Beauchamp
Top achievements
Rank 2
answered on 30 Jun 2008, 05:04 PM
Ok,

But what if I want to use a ListView inside the RadDock and use the Eval inside a RadTooltip, I cannot put the RadTooltip outside the RadDock since it needs to be inside the ListView.

What can I do?
0
Svetlina Anati
Telerik team
answered on 01 Jul 2008, 10:45 AM
Hello Gabriel,

In this particular scenario it is not possible to achieve the desired behavior. The problem is not caused by z-indexes but because of the browser behavior when the tooltip is inside the dock.

I suggest to set a bigger size for the dock or a smaller one for the tooltip.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Gabriel Beauchamp
Top achievements
Rank 2
answered on 01 Jul 2008, 12:30 PM
I have yet another weird problem with the ToolTip not showing at all.

Please test this in FireFox, you'll see that the first tooltip inside the first Dock will show fine, but the other two will not show at all. If you have more than 1 Dock, the Tooltip does not show. Copy and paste this exact code to test:

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

   
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" storelayoutinviewstate="false" >
        <div style="float:left;">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" EnableEmbeddedSkins="false" Skin="l33tlink" Orientation="Vertical" Width="625px">
               
                <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock_GroupMembers" runat="server" Title="Group Members" DockMode="Docked" EnableDrag="false">
                    <Commands>
                        <telerik:DockExpandCollapseCommand />
                    </Commands>
                    <ContentTemplate>
                    <table>
                        <tr>
                            <td>
                                <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1" >
                            Hello from inside the tooltip
                        </telerik:RadToolTip>
                        <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                            </td>
                        </tr>
                    </table>
                       
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock1" runat="server"  Title="Group Members2" DockMode="Docked" EnableDrag="false">
                    <Commands>
                        <telerik:DockExpandCollapseCommand />
                    </Commands>
                    <ContentTemplate>
                    <table>
                        <tr>
                            <td>
                                <telerik:RadToolTip ID="RadToolTip2" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1">
                            Hello from inside the tooltip
                        </telerik:RadToolTip>
                        <asp:HyperLink ID="HyperLink2" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                            </td>
                        </tr>
                    </table>
                       
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock2" runat="server"  Title="Group Members3" DockMode="Docked" EnableDrag="false">
                    <Commands>
                        <telerik:DockExpandCollapseCommand />
                    </Commands>
                    <ContentTemplate>
                    <table>
                        <tr>
                            <td>
                                <telerik:RadToolTip ID="RadToolTip3" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1">
                            Hello from inside the tooltip
                        </telerik:RadToolTip>
                        <asp:HyperLink ID="HyperLink3" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                            </td>
                        </tr>
                    </table>
                       
                    </ContentTemplate>
                </telerik:RadDock>
               
            </telerik:RadDockZone>
        </div>
        </telerik:RadDockLayout>

   
    </form>
</body>
</html>
0
Svetlina Anati
Telerik team
answered on 04 Jul 2008, 10:27 AM
Hello Gabriel,

I tested your code and I noticed that the TargetControl for all your RadToolTips is the same - Hyperlink1.

You should set the proper target controls as shown below:

 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" StoreLayoutInViewState="false">  
        <div style="float:left;">  
            <telerik:RadDockZone ID="RadDockZone1" runat="server" EnableEmbeddedSkins="false" 
                Skin="l33tlink" Orientation="Vertical" Width="625px">  
                <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock_GroupMembers" 
                    runat="server" Title="Group Members" DockMode="Docked" EnableDrag="false">  
                    <Commands> 
                        <telerik:DockExpandCollapseCommand /> 
                    </Commands> 
                    <ContentTemplate> 
                        <table> 
                            <tr> 
                                <td> 
                                    <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" /> 
                                </td> 
                            </tr> 
                        </table> 
                        <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                            Position="Center" TargetControlID="HyperLink1">  
                            Hello from inside the tooltip  
                        </telerik:RadToolTip> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock1" runat="server" 
                    Title="Group Members2" DockMode="Docked" EnableDrag="false">  
                    <Commands> 
                        <telerik:DockExpandCollapseCommand /> 
                    </Commands> 
                    <ContentTemplate> 
                        <table> 
                            <tr> 
                                <td> 
                                    <telerik:RadToolTip ID="RadToolTip2" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                                        Position="Center" TargetControlID="HyperLink2">  
                                        Hello from inside the tooltip  
                                    </telerik:RadToolTip> 
                                    <asp:HyperLink ID="HyperLink2" runat="server" Text="Click for tooltip" /> 
                                </td> 
                            </tr> 
                        </table> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock2" runat="server" 
                    Title="Group Members3" DockMode="Docked" EnableDrag="false">  
                    <Commands> 
                        <telerik:DockExpandCollapseCommand /> 
                    </Commands> 
                    <ContentTemplate> 
                        <table> 
                            <tr> 
                                <td> 
                                    <telerik:RadToolTip ID="RadToolTip3" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                                        Position="Center" TargetControlID="HyperLink3">  
                                        Hello from inside the tooltip  
                                    </telerik:RadToolTip> 
                                    <asp:HyperLink ID="HyperLink3" runat="server" Text="Click for tooltip" /> 
                                </td> 
                            </tr> 
                        </table> 
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </div>-  
          
        </telerik:RadDockLayout> 
    </form> 
</body> 
</html> 

For your convenience I attached your modified page.



All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
ToolTip
Asked by
blara
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Gabriel Beauchamp
Top achievements
Rank 2
Svetlina Anati
Telerik team
Share this question
or