Предотвращение автозакрытия

Tooltipster — это мощная библиотека для создания всплывающих подсказок на веб-страницах. Одной из ключевых особенностей является управление поведением подсказок при взаимодействии пользователя с элементами страницы. Автозакрытие (autoClose) по умолчанию включено, что означает, что подсказка исчезает при потере фокуса или уходе курсора. В некоторых случаях требуется удерживать подсказку открытой до явного закрытия. Для этого Tooltipster предоставляет несколько подходов.

Настройка параметра trigger

Trigger определяет, какое событие вызывает показ и скрытие подсказки. По умолчанию используется hover. Чтобы предотвратить автозакрытие, следует использовать триггер custom:

$('#myElement').tooltipster({
    content: 'Подсказка остаётся открытой',
    trigger: 'custom',
    interactive: true
});
  • trigger: 'custom' отключает стандартное поведение показа/скрытия.
  • interactive: true позволяет пользователю взаимодействовать с подсказкой без её мгновенного закрытия при уходе курсора.

После установки custom триггера отображение и скрытие подсказки осуществляется программно:

$('#myElement').on('click', function() {
    $(this).tooltipster('open');
});

$('#closeButton').on('click', function() {
    $('#myElement').tooltipster('close');
});

Использование interactive для предотвращения закрытия при наведении

Параметр interactive гарантирует, что подсказка не закроется, если курсор находится внутри неё или на интерактивных элементах подсказки. Это особенно важно для форм или меню внутри подсказки:

$('#myElement').tooltipster({
    content: $('<div>Форма:<input type="text"/></div>'),
    trigger: 'hover',
    interactive: true
});
  • interactive: true предотвращает закрытие при наведении на подсказку.
  • Можно комбинировать с delay для контроля времени ожидания перед скрытием.

Программное управление закрытием

Для точного контроля автозакрытия можно использовать методы open и close. Пример с таймером:

$('#myElement').tooltipster({
    content: 'Остаток открытой подсказки',
    trigger: 'custom',
    interactive: true
});

$('#myElement').on('mouseenter', function() {
    $(this).tooltipster('open');
});

$('#myElement').on('mouseleave', function() {
    setTimeout(() => {
        $(this).tooltipster('close');
    }, 5000); // закрытие через 5 секунд
});

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

Использование событий onOpen и onClose

Tooltipster предоставляет события жизненного цикла подсказки, которые дают возможность управлять её поведением динамически:

$('#myElement').tooltipster({
    content: 'События открытия и закрытия',
    trigger: 'hover',
    interactive: true,
    functionReady: function(instance, helper) {
        console.log('Подсказка открыта', helper);
    },
    functionAfter: function(instance, helper) {
        console.log('Подсказка закрыта', helper);
    }
});
  • functionReady вызывается после отображения подсказки.
  • functionAfter срабатывает после скрытия. Можно отменить закрытие в определённых условиях, используя комбинированно с trigger: 'custom'.

Предотвращение закрытия при клике вне подсказки

По умолчанию, при клике вне элемента с подсказкой она закрывается. Для предотвращения используется комбинация trigger: 'custom' и отслеживание событий клика:

$('#myElement').tooltipster({
    content: 'Подсказка не закрывается вне элемента',
    trigger: 'custom',
    interactive: true
});

$(document).on('click', function(e) {
    if (!$(e.target).closest('#myElement, .tooltipster-content').length) {
        // оставить подсказку открытой
    }
});

Такой подход позволяет полностью контролировать момент закрытия.

Выводы по управлению автозакрытием

  • Использование trigger: 'custom' — основной способ отключить автозакрытие.
  • interactive: true предотвращает закрытие при взаимодействии с подсказкой.
  • Программные методы open и close позволяют создавать гибкую логику показа и скрытия.
  • События functionReady и functionAfter дают доступ к жизненному циклу подсказки.
  • Контроль кликов вне элемента обеспечивает стабильное удержание подсказки на экране.

Правильная комбинация этих инструментов позволяет создавать подсказки, которые остаются открытыми столько, сколько необходимо, и обеспечивают удобный пользовательский опыт при сложной интерактивности.

Оглавление