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
1 Answer, 1 is accepted
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"><html xmlns="http://www.w3.org/1999/xhtml"> <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