Таймауты для автозакрытия

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

Параметр delay и timer

Для управления временем отображения используются два основных параметра:

  • delay — задержка перед показом тултипа. Значение задается в миллисекундах. Например, delay: 300 означает, что тултип появится через 300 мс после наведения на элемент. Этот параметр влияет на отложенное появление, но не на закрытие.

  • timer — интервал автозакрытия тултипа. Указывается в миллисекундах. Например, timer: 2000 автоматически закроет тултип через 2 секунды после его открытия.

$('.tooltip').tooltipster({
    content: 'Пример автозакрытия',
    timer: 2000
});

В этом примере подсказка исчезнет автоматически через 2 секунды, даже если курсор пользователя останется над элементом.

Взаимодействие с trigger и interactive

Параметр trigger определяет способ вызова тултипа (hover, click, custom). При использовании timer важно учитывать тип триггера:

  • Для hover таймер запускается после появления тултипа.
  • Для click или custom таймер запускается при программном открытии.

Параметр interactive: true позволяет пользователю взаимодействовать с содержимым тултипа (кнопки, ссылки), не закрывая его преждевременно. В таком случае таймер продолжает отсчет только после того, как курсор покинет тултип.

$('.tooltip').tooltipster({
    content: 'Интерактивная подсказка',
    timer: 3000,
    interactive: true
});

Динамическое управление таймером

Tooltipster позволяет изменять таймер после инициализации через методы API. Основные методы:

  • instance.option('timer', значение) — установка нового времени автозакрытия.
  • instance.close() — принудительное закрытие тултипа в любой момент.
  • instance.open() — открытие тултипа с повторным запуском таймера.
var instance = $('.tooltip').tooltipster().tooltipster('instance');

instance.option('timer', 5000); // увеличиваем время автозакрытия
instance.open(); // открытие с новым таймером

Комбинация delay и timer для сложных сценариев

Для более сложных интерфейсов возможно комбинировать задержку перед показом и автоматическое закрытие:

$('.tooltip').tooltipster({
    content: 'Сложная подсказка',
    delay: 400,
    timer: 2500
});
  • Сначала будет ожидание 400 мс перед показом тултипа.
  • После отображения таймер в 2500 мс автоматически закроет подсказку.
  • Если курсор пользователя покинет элемент до истечения delay, тултип не откроется и таймер не запустится.

Учёт динамически создаваемых элементов

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

$('#container').on('mouseenter', '.dynamic-tooltip', function() {
    $(this).tooltipster({
        content: 'Динамический тултип',
        timer: 1500
    });
});

Такой подход гарантирует корректный запуск таймера при каждом наведении на новый элемент.

Настройка глобального времени автозакрытия

Для проекта с множеством подсказок можно определить глобальные настройки таймера через $.tooltipster.defaults:

$.tooltipster.defaults.timer = 3000;

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

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

  • Таймер следует устанавливать с запасом, чтобы пользователь успевал прочитать содержание.
  • Для длинного интерактивного контента лучше сочетать interactive: true и более длинный таймер.
  • Автозакрытие не мешает программному управлению тултипами через API: можно закрывать или переоткрывать подсказку по событию.

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

Оглавление