Расположите подсказку jQueryUI на основе указателя мыши - PullRequest
Новая
       6

Расположите подсказку jQueryUI на основе указателя мыши

1 голос
/ 03 февраля 2020

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 Tooltip на курсор мыши? Это похоже на ожидаемую особенность для виджета подсказки. Я что-то упустил очевидное?

РЕДАКТИРОВАТЬ: можно также поместить событие в атрибут "of" позиции "position". В этом случае вы используете позицию, где это событие вызвало в качестве ссылки. К сожалению, в jQueryUI Tooltip нет способа получить доступ к событию, которое его вызвало. Эта функция была запрошена 7 лет go: https://bugs.jqueryui.com/ticket/9239

Ответы [ 2 ]

2 голосов
/ 03 февраля 2020

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>
1 голос
/ 03 февраля 2020

jQueryUI Подсказки позволяют отслеживать мышь . 

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