jquery - Telerik RadToolTipManager Chrome 中的工具提示位置不正确

标签 jquery asp.net telerik rad-controls kendo-tooltip

我正在使用 telerik RadToolTipManager 控件在 html 控件上显示工具提示。( anchor 标记、span 标签等),如下所示在 asp.net 中的 .ascx 页面中

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

上面的代码在 IE 和 FF 中工作正常,并在我在标记中设置 Position="TopRight" 时在 TopRight 显示提示。

问题:现在,当我在 Chrome 中打开页面时,它会在第一次加载页面时在正确位置显示工具提示。 但是当我向下滚动页面时,工具提示位置远高于鼠标指针

您能给我一个建议吗?当用户悬停元素时,有什么方法可以设置正确的位置。我们如何使用RadToolTipManagerOnClientBeforeShow事件设置位置。

谢谢

任何帮助将非常感激..!!

最佳答案

这已被报告为错误 ( Wrong placement (position) of RadToolTip in Chrome 61 )。解决方法是重写 _getPosRelativeToMouse 方法。

这段 Js 代码应该可以解决这个问题。

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

关于jquery - Telerik RadToolTipManager Chrome 中的工具提示位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47173352/

相关文章:

jquery - 自定义 Kendo 下拉多选以使用复选框

c# - 将 session 转换到对象

javascript - 在针对最近的类(class)时遇到问题

jquery - 在此元素后插入克隆时元素丢失事件

asp.net - 如何设置 HtmlEditorExtender 的内容服务器端

asp.net - 只读 session 可写

c# - 尝试在 VS 2017 中的 ASP.NET Core 中构建项目时出现 UseBrowserLink 错误

jquery - 在移动 View 中无法弄清楚如何使我的菜单按钮工作

php - 尝试 Catch 不触发功能

asp.net - : LINQ To SQL for data access 的最佳实践