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

Tooltip and Masterpage CSS problem

5 Answers 108 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
arnaud
Top achievements
Rank 1
arnaud asked on 27 Jan 2009, 03:35 PM
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

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 30 Jan 2009, 01:48 PM
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.
0
arnaud
Top achievements
Rank 1
answered on 07 Feb 2009, 12:17 AM
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).



0
KDL
Top achievements
Rank 1
answered on 28 May 2010, 07:10 PM
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.
0
Alaa Majzoub
Top achievements
Rank 2
answered on 20 Jul 2010, 04:04 PM
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.


0
Basel Nimer
Top achievements
Rank 2
answered on 20 Jul 2010, 04:10 PM
My mistake, Apologies

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

Using RenderInPageRoot="true" did it
Tags
ToolTip
Asked by
arnaud
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
arnaud
Top achievements
Rank 1
KDL
Top achievements
Rank 1
Alaa Majzoub
Top achievements
Rank 2
Basel Nimer
Top achievements
Rank 2
Share this question
or