Задержка исчезновения

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

Настройка задержки исчезновения

Для задания задержки используется опция delay при инициализации Tooltipster. Она принимает одно или два значения: первое — задержка перед показом, второе — задержка перед скрытием.

$('.tooltip').tooltipster({
    delay: [300, 700] // 300 мс перед показом, 700 мс перед скрытием
});
  • Первый параметр — время в миллисекундах до появления тултипа после события mouseenter.
  • Второй параметр — время в миллисекундах до исчезновения тултипа после события mouseleave. Если второй параметр не указан, используется то же значение, что и для показа.

Пример с одной задержкой для обоих событий:

$('.tooltip').tooltipster({
    delay: 500 // одинаковая задержка для показа и скрытия
});

Использование с различными событиями

Tooltipster поддерживает несколько типов событий, которые могут влиять на отображение и скрытие подсказки: hover, click, focus. Задержка исчезновения работает для каждого из них, но требует корректной привязки событий:

$('.tooltip').tooltipster({
    trigger: 'hover',
    delay: [200, 1000] // быстро показываем, медленно скрываем
});
  • При trigger: 'hover' подсказка появляется через 200 мс и исчезает через 1000 мс после ухода курсора.
  • При trigger: 'click' задержка исчезновения учитывается после повторного клика или вызова метода .tooltipster('hide').

Динамическая смена задержки

Для более сложных сценариев возможно изменение задержки на лету через метод option:

var instance = $('.tooltip').tooltipster();
instance.tooltipster('option', 'delay', [100, 1500]);

Теперь подсказка будет показываться через 100 мс и исчезать через 1500 мс, что может использоваться в зависимости от контекста интерфейса или типа контента внутри подсказки.

Задержка исчезновения при интерактивном контенте

Если подсказка содержит интерактивные элементы (кнопки, ссылки, формы), рекомендуется использовать задержку скрытия, чтобы дать пользователю время на взаимодействие. Для этого устанавливают высокий второй параметр:

$('.tooltip-interactive').tooltipster({
    interactive: true,
    delay: [0, 2000] // мгновенный показ, 2 секунды до скрытия
});
  • Опция interactive: true предотвращает мгновенное закрытие подсказки при переходе курсора на её содержимое.
  • Второй параметр задержки предотвращает резкое исчезновение при случайном уходе курсора.

Управление задержкой через события API

Tooltipster предоставляет события для более точного контроля:

$('.tooltip').on('tooltipster:show', function() {
    console.log('Подсказка показана');
});

$('.tooltip').on('tooltipster:hide', function() {
    console.log('Подсказка скрыта после задержки');
});

Используя события tooltipster:show и tooltipster:hide, можно синхронизировать анимации или выполнять дополнительные действия именно после завершения задержки исчезновения.

Практические рекомендации

  1. Короткая задержка для быстрого интерфейса: 100–300 мс для скрытия подсказки при hover.
  2. Длинная задержка для интерактивного контента: 1500–2500 мс, чтобы дать пользователю время кликнуть или скопировать текст.
  3. Разные задержки для показа и скрытия: улучшает UX, делая интерфейс отзывчивым, но при этом предотвращая внезапное исчезновение подсказок.
  4. Использование событий API: позволяет запускать анимации и другие действия синхронно с завершением задержки скрытия.

Пример комплексной конфигурации

$('.tooltip-complex').tooltipster({
    theme: 'tooltipster-light',
    trigger: 'hover',
    interactive: true,
    delay: [250, 2000],
    animation: 'fade',
    animationDuration: 300
});
  • theme задает визуальный стиль.
  • interactive: true разрешает взаимодействие с контентом подсказки.
  • delay: [250, 2000] показывает подсказку через 250 мс и скрывает через 2 секунды.
  • animation и animationDuration делают исчезновение плавным, синхронизированным с задержкой.

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

Оглавление