Hello,
I have been attempting to implement a tooltip modal dialog that will display when an event happens, such as when a user clicks a link. All is fine in my testing environment both with IE6 and IE7, but the problem occurs when I place my user control into SharePoint. The tooltip when displayed within SharePoint shows up after all of the HTML that is already rendered on the page. Additionally, it shows behind the grey wall that would normally appear behind the control. I am attaching a couple of screenshots as well as the code for my user control. If anyone can help me in getting this to render correctly in SharePoint with IE7, I would be most appreciative. Thank you for your time and have a great night.
I have been attempting to implement a tooltip modal dialog that will display when an event happens, such as when a user clicks a link. All is fine in my testing environment both with IE6 and IE7, but the problem occurs when I place my user control into SharePoint. The tooltip when displayed within SharePoint shows up after all of the HTML that is already rendered on the page. Additionally, it shows behind the grey wall that would normally appear behind the control. I am attaching a couple of screenshots as well as the code for my user control. If anyone can help me in getting this to render correctly in SharePoint with IE7, I would be most appreciative. Thank you for your time and have a great night.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ToolTipTest.ascx.cs" Inherits="ToolTipTest" %> |
<%@ Register Assembly="Telerik.Web.UI, Version=2009.2.826.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<script type="text/javascript"> |
function closeToolTip(strToolTipID) |
{ |
var ToolTip = $find(strToolTipID); |
if (ToolTip.isVisible()) |
{ |
ToolTip.hide(); |
} |
} |
function showToolTip(strToolTipID) |
{ |
var ToolTip = $find(strToolTipID); |
if (!ToolTip.isVisible()) |
{ |
ToolTip.show(); |
} |
} |
var tipToolTip = '<%= tipToolTip.ClientID %>'; |
</script> |
<div style="height: 200px; width: 400px; text-align: center; border: solid 1px #000;"> |
This is body text. <a href="#" onclick="showToolTip(tipToolTip); return false;">Click here</a> to display the tooltip. |
</div> |
<telerik:RadToolTip id="tipToolTip" runat="server" Modal="True" |
Position="Center" RelativeTo="BrowserWindow" AutoCloseDelay="0" HideDelay="0" |
RenderInPageRoot="True" ShowDelay="0" ShowEvent="FromCode" |
> |
This is my tooltip. <a href="#" onclick="closeToolTip(tipToolTip); return false;">Click here</a> to close the tooltip. |
</telerik:RadToolTip> |