Tooltip and Masterpage CSS problem

6 posts, 0 answers
  1. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 27 Jan 2009 Link to this post

    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

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 06 Feb 2009 Link to this post

    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).



  5. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 28 May 2010 Link to this post

    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.
  6. Alaa Majzoub
    Alaa Majzoub avatar
    49 posts
    Member since:
    Nov 2007

    Posted 20 Jul 2010 Link to this post

    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.


  7. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 20 Jul 2010 Link to this post

    My mistake, Apologies

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

    Using RenderInPageRoot="true" did it
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017