Задержка при уходе курсора

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

Свойство delay

Параметр delay отвечает за время задержки перед показом или скрытием тултипа. Он может принимать следующие формы:

  1. Число – одинаковая задержка для появления и скрытия:
tippy('#myButton', {
  content: 'Пример тултипа',
  delay: 300 // 300 мс на показ и скрытие
});
  1. Массив из двух чисел – отдельная настройка для появления и скрытия:
tippy('#myButton', {
  content: 'Пример тултипа',
  delay: [500, 200] // 500 мс задержка перед показом, 200 мс перед скрытием
});

В этом примере, даже если курсор быстро покинет элемент, тултип останется видимым ещё 200 мс, что улучшает восприятие интерфейса.

Особенности работы с delay при взаимодействии с interactive: true

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

tippy('#myButton', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  delay: [0, 300]
});
  • interactive: true предотвращает скрытие тултипа при наведении курсора на его область.
  • Задержка скрытия в 300 мс создаёт плавный эффект, особенно полезный для элементов с вложенными интерактивными зонами.

Применение динамического управления задержкой

В Tippy.js возможно динамически менять задержку через функцию при инициализации. Это позволяет адаптировать поведение тултипа к контексту или состоянию элемента.

tippy('#myButton', {
  content: 'Динамическая задержка',
  delay: (instance) => {
    if (instance.reference.classList.contains('fast')) {
      return [100, 50]; // для быстрых элементов минимальная задержка
    }
    return [500, 300]; // для остальных стандартная задержка
  }
});

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

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

Опция hideOnClick определяет, будет ли тултип скрываться при клике на элемент. Она может комбинироваться с задержкой:

tippy('#myButton', {
  content: 'Пример с кликом',
  delay: [0, 400],
  hideOnClick: false
});

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

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

  • Задержка появления (delay[0]) обычно меньше 500 мс, чтобы тултип появлялся достаточно быстро.
  • Задержка скрытия (delay[1]) чаще всего составляет 200–400 мс, чтобы избежать «дёрганого» исчезновения при кратковременном уходе курсора.
  • Для интерактивных тултипов задержка скрытия должна быть длиннее, чем для статических, чтобы пользователь успевал перемещать курсор между элементами.
  • Комбинация interactive: true + delay + hideOnClick обеспечивает оптимальное поведение в сложных интерфейсах с кнопками, меню и формами внутри тултипа.

Выводы по применению задержки

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

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

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

Оглавление