jquery - 根据鼠标指针定位 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

您可以附加到的事件是工具提示的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>