Tooltip and Masterpage CSS problem

[arnaud]

Hi,

The content on my master page is englobed into a <div id="general"></ div>

Im my css :

#general{
    position:relative;
    width:990px;
    margin:0 auto;
}

Now, when I include a radtooltip in my content page like this :

 <telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true"
            Position="Center" RelativeTo="BrowserWindow" ManualClose="true">
            <asp:Panel ID="Panel1_Main" runat="server">
            Hello</asp:Panel>
 </telerik:RadToolTip>

, the tooltip position is strange : If I open the tooltip when the page is scrolled, the position is ok (center of the browser). If I'm on the top of the page, the tooltip is not anymore in the center, it is somewhere on the top left of the screen.

After testing, it seems that the problem comes from : margin:0 auto;

Do you have any idea about a solution to this ?

Thank You
Arnaud

[Svetlina Anati]

Hello Arnaud,

The described behavior is the expected one when you have a relative parent of the absolute positioned RadToolTip. However, you can use one of the following approaches to get the desired behavior:

1. Use a RadToolTipManager instead of RadToolTip - in this case the tooltips will be added as children of the form element instead of the place the manegr is declared.
2. Override the default function which adds the tooltip and make it add it to the form. In order to do this you should add the following code to your page:
   
   

       if (typeof(Telerik) != "undefined")
       {
           Telerik.Web.UI.RadToolTip.prototype._addToolTipToDocument = function(elem)
           {
              //Append tooltip to end of document
              var form = document.forms[0];
              form.appendChild(this._popupElement);
           };
       }

Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[arnaud]

Svetlina,

Thank you for your answer. Unfortunately going from Radtooltip to RadTooltipManager in my case is quite complex (page is really complex at the moment), therefore I did not test it.

However I found a fix that could help people in my case (works with firefox 3.6 and IE 7, I did not test with other browsers) :

General div englobing the website :

#general{
    position:relative;
    width:990px;
    margin:0 auto;
}

Radtooltip in a page :

<div  style="position: fixed; top: 0px; left: 0px;">
 <telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true"
            Position="Center" RelativeTo="BrowserWindow" ManualClose="true">
            <asp:Panel ID="Panel1_Main" runat="server">
            Hello</asp:Panel>
 </telerik:RadToolTip>
</div>

Source : http://forums.asp.net/p/1012796/1355399.aspx (about modalpopupextender but it does not matter in our case).

[KDL]

Here's the simple solution in case anyone stumbles onto this old post:

On the RadToolTip control, set RenderInPageRoot="true"

This eliminates the need to change/remove a bunch of CSS stuff all over your app. That tidbit would have saved me 3 hours of grief! Hope it helps someone else.

[Alaa Majzoub]

Setting RenderInPageRoot="true" didnt work for me.

Neither did the <div  style="position: fixed; top: 0px; left: 0px;">

The problem is not only with the position of the tooltip, but also the overlay (the tooltip is modal) is starting at the corner of the relative DIV, and causing a horizontal scroll.

[Basel Nimer]

My mistake, Apologies

I was changing one tooltip and testing another that have the same exact problem.

Using RenderInPageRoot="true" did it