Position a jQueryUI tooltip based on mouse pointer

jQueryUI Tooltip position system is based, by default, on the position of the element triggering the tooltip. I use frequently something like this, when the triggering element in small :

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

This renders the tooltip slighlty to the right of the triggering element. You can also pick another DOM element as your reference, like this :

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

But it does not seem you can use the current position of the mouse pointer as your reference.

Right now, I have a use case with an extremly large triggering element (it's even much larger than the page, with an horizontal scroll). I don't have any more accurate element to use as a target in "of". The least terrible thing I can do is this :

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

But that does not prevent the tooltip from appearing very far from the mouse, if the user hovers on the left or right of the element. And because of the permanent horizontal scroll, the tootlip doesn't even appear at the same spot every time, it depends on how far you've scrolled...

Is there any way to position a jQueryUI Tooltip based on the mouse cursor ? This seems like an expected feature for a tooltip widget. Did I miss something obvious ?

EDIT : one can also put an event in the "of" attribute of "position". In that case you use the position where this event triggered as a reference. Unfortunately, there is no way in a jQueryUI Tooltip to access the event that triggered it. This feature was requested 7 years ago : https://bugs.jqueryui.com/ticket/9239

Solution

The event you can attach to is open for the tooltip.

$(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>