Telerik RadToolTipManager Tooltip position incorrect in Chrome

Question

I am using telerik RadToolTipManager control to show tooltip on html controls.(anchor tag, span label etc.) as below in my .ascx page in asp.net

<telerik:RadToolTipManager OnClientBeforeShow="BeforeShow_Tootip" ID="BVAutoRadToolTipManager" runat="server" ToolTipZoneID="tooltipZoneDiv" Position="TopRight" HideDelay="500" AutoCloseDelay="10000" Skin="Vista" AutoTooltipify="True">
        </telerik:RadToolTipManager>

above code is working fine in IE and FF and display tootip at TopRight as I set Position="TopRight" in markup.

Issue: Now, when I open my page in Chrome it show tooltip on correct position on page load first time. but when I Scroll the page down then the tool tip position is far above the mouse pointer.

Can you please give me a suggestions that Is there any way to set the position correct when user hover the element. How can we set position Using OnClientBeforeShow event of RadToolTipManager.

Thanks

Any help will be very much appreciated ..!!

Answer 1

This was reported as a bug (Wrong placement (position) of RadToolTip in Chrome 61). Workaround is to override the _getPosRelativeToMouse method.

This Js code should fix the issue.

Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function (targetBounds) {
    var elemX = targetBounds.x;
    var elemY = targetBounds.y;

    //Get last recorded mouse position
    var pos = this._getMousePosition();
    var mouseX = pos.clientX;
    var mouseY = pos.clientY;

    //Take into consideration the offsetScroll!
    var standard = $telerik.standardsMode;
    //$telerik.standardsMode does not do a good job! Extra check is needed for FF!!
    //And yet another check needed for Safari! It should always be set to false in order to get the calculations right
    if (!$telerik.isIE && document.compatMode != "CSS1Compat") standard = false;
    else if ($telerik.isSafari && !(Telerik.Web.Browser.chrome && Telerik.Web.Browser.version >= 61)) standard = false;

    if (standard) {
        elemX -= $telerik.getCorrectScrollLeft(document.documentElement);
        elemY -= document.documentElement.scrollTop;
    }
    else //NEW: Add support for quircksmode
    {
        elemX -= $telerik.getCorrectScrollLeft(document.body);
        elemY -= document.body.scrollTop;
    }

    //Calculate the position of the mouse, relative to the targetcontrol
    var deltaX = mouseX - elemX;
    var deltaY = mouseY - elemY;

    return { x: deltaX, y: deltaY };
}