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

В Tippy.js управление временем отображения и скрытия подсказок осуществляется с помощью параметров delay и duration. Эти параметры позволяют настроить UX так, чтобы тултипы появлялись не мгновенно, а с небольшой задержкой, или скрывались постепенно, создавая плавный визуальный эффект.

  • delay — управляет задержкой перед показом (show) и перед скрытием (hide) тултипа.
  • duration — задаёт время анимации при появлении и исчезновении подсказки.

Синтаксис для настройки задержек:

tippy('#button', {
  content: 'Пример подсказки',
  delay: [500, 200], // [задержка перед show, задержка перед hide] в миллисекундах
  duration: [300, 150] // [время анимации появления, время анимации скрытия]
});

В данном примере:

  • Подсказка появится через 500 мс после наведения.
  • Скрытие произойдет через 200 мс после ухода курсора.
  • Анимация появления займёт 300 мс, а исчезновения — 150 мс.

Если параметр delay задан одним числом, оно применяется одинаково к show и hide:

tippy('#button', {
  content: 'Одинаковая задержка',
  delay: 400
});

Настройка динамических задержек

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

tippy('#button', {
  content: 'Динамическая задержка',
  delay: (instance, event) => {
    if (event.type === 'mouseenter') {
      return 600; // задержка перед show
    }
    return 100; // задержка перед hide
  }
});

Функция получает два аргумента:

  • instance — объект тултипа.
  • event — DOM-событие, вызвавшее показ или скрытие подсказки.

Возвращаемое значение функции определяет задержку в миллисекундах.

Различие между delay и duration

  • delay отвечает за задержку перед запуском анимации. Например, если delay: 500, тултип не начнет появляться сразу.
  • duration управляет скоростью самой анимации. Например, duration: 300 означает, что тултип появится или скроется за 300 мс.

Можно комбинировать оба параметра для создания максимально комфортного UX. Например:

tippy('#button', {
  content: 'Комбинированная настройка',
  delay: [400, 100],
  duration: [500, 200]
});

Здесь тултип:

  1. Ждёт 400 мс перед появлением.
  2. Появляется плавно за 500 мс.
  3. При уходе курсора скрывается через 100 мс с анимацией 200 мс.

Контроль задержки при интерактивных подсказках

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

tippy('#button', {
  content: 'Интерактивная подсказка',
  interactive: true,
  delay: [300, 300],
  duration: 250
});

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

Задержки и несколько триггеров

Tippy.js позволяет задавать несколько триггеров (trigger) — mouseenter, focus, click. Задержки будут применяться для каждого из них одинаково, если не указана динамическая функция.

tippy('#input', {
  content: 'Подсказка для input',
  trigger: 'mouseenter focus',
  delay: [200, 150]
});

Тултип появится через 200 мс при наведении и через 200 мс при фокусе, а скрытие произойдёт через 150 мс после ухода мыши или потери фокуса.

Влияние глобальных настроек

Tippy.js позволяет задавать глобальные параметры через tippy.setDefaultProps. Это удобно, если все тултипы в проекте должны иметь одинаковую задержку и длительность анимации:

tippy.setDefaultProps({
  delay: [300, 100],
  duration: [400, 200]
});

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

Выводы по использованию задержек

  • Использование массивов [show, hide] даёт полный контроль над поведением.
  • Динамические функции delay позволяют адаптировать UX под контекст.
  • Интерактивные тултипы требуют одинаковых задержек для предотвращения случайного скрытия.
  • Глобальные настройки через tippy.setDefaultProps экономят время при работе с большим количеством элементов.

Правильная комбинация delay и duration создаёт ощущение «живого» интерфейса, делая взаимодействие с подсказками плавным и предсказуемым.

Оглавление