Tooltip positioning, scrolling <body> and IE

2 posts, 0 answers
  1. Mike
    Mike avatar
    36 posts
    Member since:
    Sep 2012

    Posted 17 Dec 2015 Link to this post

    Just passing along a bug that I found with regards to tooltip positioning and IE 11 (I didn't check other versions of IE and it does not happen in Chrome or Firefox).

     

    Details:

     If your <body> element is scrollable (vis overflow: auto and a fixed width/height), once you scroll, the tooltip position will be off. The reason is buried deep with Telerik's script code.In PopupScripts.js, the _fixPositionInBounds function, called when the popup tooltip is being shown, the code calls _getViewportBounds, which is this:

     getViewportBounds:function(){var e=$telerik.getClientBounds();

    var f=document.documentElement;
    var d=document.body;
    e.scrollLeft=$telerik.isMobileSafari?window.pageXOffset:($telerik.getCorrectScrollLeft(f)||$telerik.getCorrectScrollLeft(d));
    e.scrollTop=$telerik.isMobileSafari?window.pageYOffset:(f.scrollTop||d.scrollTop);
    return e;
    }

    For IE, scrollTop for <body> will be non-0 when scrolled which causes Telerik's popup script to think the tooltip will be positioned off screen so it adjusts. Unfortunately, this adjustment puts the tooltip in the wrong place (vertically much lower than it should be).

     The simple fix for me was to put a containing <div> as a child of <body> and use that <div> to scroll. After I did that all is well. It took me 2 days to figure this out, so posting this here :)

     

    - Mike

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Dec 2015 Link to this post

    Hi Mike,

    Could you try upgrading to the latest version because I could not reproduce such a problem with 2015.3.1111 (the latest version at the time of writing) and the following code.

    I also suggest trying the Lightweight RenderMode: http://docs.telerik.com/devtools/aspnet-ajax/controls/tooltip/mobile-support/render-modes.

    Another potential workaround for your case may be toggling the RenderInPageRoot property so the popup of the tooltip renders in another place (either in the place of declaration or as a direct child of the form element) so this may change scrolling/positioning behavior.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
        <head runat="server">
            <title></title>
            <style type="text/css">
                html, body
                {
                    margin: 0;
                    padding: 0;
                    height: 100%;
                }
            </style>
     
        </head>
        <body>
            <form id="form1" runat="server">
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
                <div style="height: 400px;">spacer so you scroll before showing the tooltip</div>
                <asp:Button ID="Button1" Text="click for tooltip" runat="server" />
                <telerik:RadToolTip runat="server" ID="RadToolTip1" TargetControlID="Button1" ShowEvent="OnClick" HideEvent="ManualClose" RelativeTo="Element" Position="BottomRight"
                    Width="200px" Height="100px" Text="lorem ipsum dolor sit amet"></telerik:RadToolTip>
                <div style="height: 2000px">spacer so the body scrolls</div>
            </form>
        </body>
    </html>


    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top