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
0
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
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
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>
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
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:
Please, note that in order to evaluate the TargetControlID expression you should call the RadToolTip's DataBind method in the code-behind:
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
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
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?
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
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
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
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>
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
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:
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
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