根据鼠标指针定位 jQueryUI 工具提示

Question

jQueryUI 工具提示位置系统默认基于触发工具提示的元素的位置。当触发元素很小时，我经常使用这样的东西：

position: {
   my: 'left top',
   at: 'right+15 center'
}

这会使工具提示略微显示在触发元素的右侧。您还可以选择另一个 DOM 元素作为参考，如下所示：

position: {
   my: 'left top',
   at: 'right+15 center',
   of: $('#otherElement')
}

但是您似乎不能将鼠标指针的当前位置作为参考。

现在，我有一个用例，它有一个非常大的触发元素（它甚至比页面大得多，有水平滚动）。在 "of" 中，我没有任何更准确的元素可用作目标。我能做的最不可怕的事情是：

position: {
   my: 'center',
   at: 'center'
}

但这并不能阻止工具提示出现在离鼠标很远的地方，如果用户将鼠标悬停在元素的左侧或右侧。而且由于永久水平滚动，tootlip 甚至不会每次都出现在同一位置，这取决于您滚动了多远...

有什么方法可以根据鼠标光标定位 jQueryUI 工具提示吗？这似乎是工具提示小部件的预期功能。我错过了一些明显的东西吗？

编辑：也可以在 "position" 的 "of" 属性中放置一个事件。在这种情况下，您可以使用触发此事件的位置作为参考。不幸的是，在 jQueryUI 工具提示中没有办法访问触发它的事件。此功能是 7 年前请求的：https://bugs.jqueryui.com/ticket/9239

Answer 1

jQueryUI 工具提示允许您track the mouse。

$( document ).tooltip({
  track: true
});

Answer 2

您可以附加的 event 是工具提示的 open。

$(function() {
  $(document).tooltip({
    open: function(e, ui) {
      ui.tooltip.position({
        my: 'left top',
        at: 'right+15 center',
        of: e
      });
    }
  });
});

label {
  display: inline-block;
  width: 5em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>

根据鼠标指针定位 jQueryUI 工具提示

Position a jQueryUI tooltip based on mouse pointer

jquery

position

jquery-ui