Позиция подсказки jQuery UI на дашике

Содержание

Вопрос или проблема
Ответ или решение
Подход к решению
Заключение

Вопрос или проблема

Я использую встроенный в WordPress jQuery UI Tooltip (jquery-ui-tooltip). Моя проблема заключается в том, чтобы контролировать позицию подсказок на экране, в настоящее время она появляется прямо над значком помощи, но также отображается примерно на 100 пикселей выше значка. Сам значок находится в div, который динамически выравнивается по центру. Он должен быть зафиксирован над значком и не прыгать вверх по странице.

Необходимые скрипты и стили добавлены следующим образом.

wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/js/um-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/css/um-tooltip.css', __FILE__), false, null);
wp_enqueue_style( 'dashicons' );

um-tooltip.css

.ui-tooltip {
    background: #356aa0;
    border: 1px solid white;
    position: relative;
    padding: 10px 20px;
    color: white;
    border-radius: 3px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    box-shadow: 0 0 7px #356aa0;
    max-width:350px;
}

um-tooltip.js

jQuery( document ).ready(function($) {
    jQuery('#kaini_pass_info').tooltip({
        content: "'Хороший' или лучше по шкале силы.<br />" +
            "Пароль не должен быть словом из словаря,<br />" +
            "именем или шаблоном клавиатуры.<br />" +
            "Советы для лучших паролей :<br />" +
            "Будьте длинными (8 или более символов),<br />" +
            "содержать заглавные буквы (A-Z),<br />" +
            "строчные буквы (a-z), цифры (0-9),<br />" +
            "и специальные символы (&,'^!.\"*[]+- и т.д.)"
    });
});

HTML

<a id="kaini_pass_info" href="#" title=""><span class="dashicons dashicons-editor-help"></span></a>

Простое решение, чтобы ваша подсказка следовала за мышью при наведении на определенный элемент:

    $(".selector").tooltip({
        track: true,//сделайте подсказку следовать за мышью при наведении на все элементы с классом "selector"
        content: "Содержимое подсказки здесь",
    });

Ответ или решение

Чтобы решить проблему с позиционированием всплывающей подсказки jQuery UI (jquery-ui-tooltip), которая появляется слишком высоко над иконкой помощи в формате dashicon, необходимо произвести несколько корректировок в JavaScript и CSS. Давайте подробно разберем шаги, чтобы установить всплывающую подсказку непосредственно над самой иконкой, избегая лишнего смещения на 100 пикселей вверх.

Подход к решению

Настройка JavaScript для точного позиционирования:
Самый простой способ контролировать позицию всплывающей подсказки — это использовать опции, которые предоставляет jQuery UI Tooltip. Для достижения вашей цели можно использовать параметры position, чтобы указать точное расположение относительно обозначенного элемента.

Пример:
```
jQuery( document ).ready(function($) {
   jQuery('#kaini_pass_info').tooltip({
       content: "'Good' or better on strength meter.&lt;br /&gt;" +
                "Password must not be a dictionary word,&lt;br /&gt;" +
                "name or keyboard pattern.&lt;br /&gt;" +
                "Tips for better passwords :&lt;br /&gt;" +
                "Be lengthy (8 or more characters),&lt;br /&gt;" +
                "contain uppercase letters (A-Z),&lt;br /&gt;" +
                "lowercase letters (a-z), digits (0-9),&lt;br /&gt;" +
                "and special characters (&amp;,'^!.\"*[]+- etc)",
       position: {
           my: "center bottom", // центр подсказки
           at: "center top-10", // чуть выше центра иконки
           collision: "fit" // предотвращает выход за границы экрана
       }
   });
});
```
В данном примере my: "center bottom" указывает, что центр всплывающей подсказки должен располагаться ниже, а at: "center top-10" — это параметр, который указывает, что подсказка будет размещена чуть выше центра иконки с учётом отступа в 10 пикселей.
Коррекция CSS:
Иногда позиционирование может зависеть от CSS-стилей. В вашем файле um-tooltip.css, вы можете проверить, нет ли какой-либо ненужной отступа или margin, который может быть интерферентом. Например:
```
.ui-tooltip {
   background: #356aa0;
   border: 1px solid white;
   position: absolute; /* Изменение на absolute для точности позиционирования */
   padding: 10px 20px;
   color: white;
   border-radius: 3px;
   font: bold 14px "Helvetica Neue", Sans-Serif;
   box-shadow: 0 0 7px #356aa0;
   max-width: 350px;
}
```
Обратите внимание, что позиция должна быть absolute, чтобы обеспечить точное позиционирование относительно родительского элемента.
Отладка:
После внесения изменений, проводите отладку, чтобы убедиться, что всплывающая подсказка отображается, как ожидалось. Проверьте консоль браузера на наличие ошибок, а также используйте инструменты разработчика для авцентрации иконки и всплывающей подсказки при наведении курсора.

Заключение

Установив указанные методы и параметры, вы с большой вероятностью достигнете желаемого позиционирования всплывающей подсказки непосредственно над иконкой dashicons. Не забывайте тестировать на разных браузерах, чтобы убедиться, что всплывающая подсказка работает на всех платформах, и корректировать параметры при необходимости.

Эти нехитрые шаги и улучшения кода помогут вам добиться идеального визуального отображения необходимых подсказок на вашем сайте.