Задержка появления

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

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

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

Задержка скрытия подсказки

Помимо задержки появления, Tooltipster позволяет управлять задержкой скрытия с помощью опции delay в сочетании с событием out. В более новых версиях (4.x и выше) можно использовать animationDuration и trigger для тонкой настройки поведения. Для простого управления временем исчезновения используется метод hide с параметрами:

$('.tooltip').tooltipster({
    delay: 300, // задержка перед появлением
    animationDuration: 200, // длительность анимации
    trigger: 'hover' // срабатывание по наведению
});

Здесь delay применяется только к появлению, а animationDuration управляет временем анимации скрытия подсказки, создавая ощущение плавного исчезновения.

Индивидуальная задержка для разных событий

Tooltipster поддерживает разные события активации: hover, click, focus, custom. Для каждого события можно задать отдельную задержку через методы API или через объект functionBefore:

$('.tooltip').tooltipster({
    trigger: 'hover',
    functionBefore: function(instance, helper){
        setTimeout(function(){
            instance.show();
        }, 700); // задержка 700 мс перед показом
    }
});

Метод functionBefore позволяет выполнять асинхронные проверки или динамически изменять содержимое подсказки перед её отображением. Задержка через setTimeout эффективна при сложной логике отображения.

Комбинация с интерактивными подсказками

Для интерактивных подсказок, где пользователь может перемещать курсор внутрь подсказки, важно сочетать delay с interactive: true. Это предотвращает преждевременное скрытие при переходе от элемента к самой подсказке:

$('.tooltip').tooltipster({
    interactive: true,
    delay: 400
});

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

Динамическая настройка задержки через API

Tooltipster предоставляет методы API для изменения параметров уже после инициализации:

var instance = $('.tooltip').tooltipster().tooltipster('instance');

// Установка задержки на лету
instance.option('delay', 600);

Такой подход полезен, когда необходимо менять поведение подсказок в зависимости от состояния страницы или действий пользователя, без полной переинициализации элементов.

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

  • Минимальная задержка: рекомендуется не ставить слишком короткую задержку (<100 мс), чтобы подсказки не мерцали при быстром перемещении курсора.
  • Оптимальная задержка: 300–500 мс для обычного текста, 600–800 мс для интерактивных элементов или подсказок с большим объёмом контента.
  • Сочетание с анимацией: задержка появления должна быть сопоставима с длительностью анимации (animationDuration) для плавного визуального эффекта.
  • Функции functionBefore и functionReady позволяют динамически контролировать задержку и содержимое, особенно когда данные подгружаются асинхронно.

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

Оглавление