Типы триггеров

Tippy.js предоставляет гибкую систему триггеров для управления появлением всплывающих подсказок. Триггер — это событие, которое инициирует показ или скрытие тултипа. Библиотека поддерживает стандартные события браузера и позволяет комбинировать их для создания интерактивных интерфейсов.

Стандартные триггеры

По умолчанию Tippy.js использует триггер mouseenter focus. Это означает, что тултип появляется при наведении мыши на элемент или получении им фокуса (например, при переходе по клавише Tab).

Пример стандартного использования:

tippy('#button', {
  content: 'Пример тултипа'
});

Эквивалентно:

tippy('#button', {
  content: 'Пример тултипа',
  trigger: 'mouseenter focus'
});

Событие клика (click)

Триггер click позволяет показывать и скрывать тултип по клику на элемент. Часто используется для кнопок, всплывающих меню или элементов управления.

tippy('#button', {
  content: 'Тултип по клику',
  trigger: 'click'
});

Особенности:

  • При повторном клике тултип скрывается.
  • Можно комбинировать с hideOnClick, чтобы контролировать скрытие при клике вне элемента:
tippy('#button', {
  content: 'Тултип с контролем клика',
  trigger: 'click',
  hideOnClick: true
});

Наведение мышью (mouseenter / mouseleave)

Триггеры mouseenter и mouseleave обеспечивают поведение «появление при наведении, скрытие при уходе мыши». Этот подход применим для подсказок, информирующих пользователя о кнопках, ссылках или иконках.

tippy('#icon', {
  content: 'Информационный тултип',
  trigger: 'mouseenter'
});

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

tippy('#icon', {
  content: 'Тултип с задержкой',
  trigger: 'mouseenter',
  delay: [300, 100] // [появление, скрытие]
});

Фокус (focus / blur)

Триггер focus полезен для элементов формы, таких как input или textarea. Тултип появляется при фокусе и скрывается при потере фокуса (blur).

tippy('#input', {
  content: 'Введите данные',
  trigger: 'focus'
});

Комбинированный подход с mouseenter позволяет показывать подсказку как при наведении мыши, так и при фокусе:

tippy('#input', {
  content: 'Подсказка при наведении и фокусе',
  trigger: 'mouseenter focus'
});

Настройка нескольких триггеров

Tippy.js поддерживает множественные триггеры, разделённые пробелами. Это позволяет одновременно использовать разные события для открытия тултипа.

tippy('#element', {
  content: 'Множественные триггеры',
  trigger: 'mouseenter click focus'
});

Пояснение:

  • mouseenter — открытие при наведении мыши.
  • click — открытие по клику.
  • focus — открытие при получении фокуса клавиатурой.

Пользовательские триггеры

Можно создавать собственные триггеры, используя методы API show(), hide() или toggle() тултипа. Это даёт полный контроль над поведением подсказки в нестандартных сценариях.

const instance = tippy('#custom', {
  content: 'Пользовательский триггер',
  trigger: 'manual'
});

document.querySelector('#custom').addEventListener('dblclick', () => {
  instance.show();
});

Особенности manual:

  • Тултип не реагирует на стандартные события.
  • Управление полностью через методы show(), hide(), toggle().

Всплывающие меню и интерактивные тултипы

Для интерактивных элементов часто используют комбинацию mouseenter focus с параметром interactive: true. Это предотвращает закрытие тултипа при перемещении курсора внутрь элемента подсказки.

tippy('#menu', {
  content: 'Интерактивный тултип',
  trigger: 'mouseenter focus',
  interactive: true
});

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

Итоговая схема триггеров

Триггер Описание
mouseenter Появление при наведении мыши
mouseleave Скрытие при уходе мыши
focus Появление при фокусе элемента
blur Скрытие при потере фокуса
click Появление/скрытие по клику
manual Полностью ручное управление через API

Рекомендации по выбору триггеров

  • Информационные подсказки: использовать mouseenter focus.
  • Элементы формы: использовать focus с опциональным mouseenter.
  • Меню и панели управления: click с interactive: true.
  • Пользовательские сценарии: manual с методами API.

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

Оглавление