jQuery UI 工具提示在 IE 和 chrome 中的位置不同

Question

我在 MSIE 11 和 Chrome 49 中使用 jQuery UI 工具提示小部件时观察到不同的定位行为。

如果带有小部件的页面在 MSIE 中滚动，则工具提示显示在错误的位置：

请查看 MSIE 中的 jsfiddle 来演示该问题。

    $(".helpIcon").tooltip({
      hide: false,
      show: false,
      position: {
        my: "right top+3",
        at: "right bottom",
        using: function(position) {
          console.log(position);
          $(this).css(position);
        }
      }
    });

https://jsfiddle.net/v9Lpxa05/3/

我正在做一些意想不到的事情？还是我需要申请 hack？

Answer 1

这看起来像是工具提示小部件中的错误。

出于某种原因，IE 在创建工具提示 div 时跳过初始位置计算，并在显示时首先设置它。但是，如果 top 和 left 值是默认值，则位置函数会进行额外计算，从而导致不同的行为。

一个快速但肮脏的解决方法是在调用 .position:

时将 top 和 left 属性设置为初始值 0

var positionOriginal = $.fn.position;
$.fn.position = function(val) {
  if ( val ) {
    this.css("top", "0");
    this.css("left", "0");
  }
  return positionOriginal.call(this, val);
};

慎用！这解决了眼前的问题，但像这样的 hack 通常不应该进入生产代码。行为可能会在未来的任何更新中改变

示例：https://jsfiddle.net/450uj66d/1/

jQuery UI 工具提示在 IE 和 chrome 中的位置不同

jQuery UI tooltip position different in IE and chrome

jquery

internet-explorer

position

jquery-ui

tooltip