SharePoint 2007 + Telerik Tooltip + IE7 results in display issue

2 posts, 0 answers
  1. Nameless
    Nameless avatar
    2 posts
    Member since:
    Jan 2010

    Posted 28 Jan 2010 Link to this post

    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.

    <%@ 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. <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. <href="#" onclick="closeToolTip(tipToolTip); return false;">Click here</a> to close the tooltip.  
        </telerik:RadToolTip> 
  2. Nameless
    Nameless avatar
    2 posts
    Member since:
    Jan 2010

    Posted 29 Jan 2010 Link to this post

    I think I finally figured it out, I have to add:
    <style type="text/css">  
     
    .RadToolTip_Default  
    {  
        position: absolute !important;  
    }  
     
    </style> 
    to my page to make it behave properly. Thanks anyway!

Back to Top