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

Tooltip positioning, scrolling <body> and IE

1 Answer 820 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mike asked on 17 Dec 2015, 04:42 PM

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



 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;
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



1 Answer, 1 is accepted

Sort by
Marin Bratanov
Telerik team
answered on 18 Dec 2015, 08:56 AM

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:

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" "">
    <head runat="server">
        <style type="text/css">
            html, body
                margin: 0;
                padding: 0;
                height: 100%;
        <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>


Marin Bratanov
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
Asked by
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question