Параметры триггеров

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

По умолчанию используется триггер:

trigger: 'mouseenter focus'

Это означает:

  • mouseenter — появление при наведении курсора
  • focus — появление при получении фокуса (например, через клавиатуру)

Параметр trigger

Позволяет задать список событий, при которых tooltip будет активироваться.

tippy(element, {
  trigger: 'click'
});

Поддерживаемые значения:

  • mouseenter
  • mouseleave
  • focus
  • blur
  • click
  • manual

Комбинирование триггеров

Можно указать несколько событий через пробел:

trigger: 'mouseenter click'

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

Особенности отдельных триггеров

mouseenter / mouseleave

Классическая модель hover:

trigger: 'mouseenter'
  • Показывает tooltip при наведении
  • Скрывает при уходе курсора

Используется чаще всего для десктопных интерфейсов.

focus / blur

Актуально для accessibility и работы с клавиатурой:

trigger: 'focus'
  • Подсказка появляется при фокусе элемента
  • Важно для пользователей, работающих без мыши

click

trigger: 'click'
  • Показывает tooltip при клике
  • Повторный клик обычно скрывает его

Используется для интерактивных подсказок, меню, popover-элементов.

manual

Полностью отключает автоматическое управление:

trigger: 'manual'

Контроль осуществляется программно:

const instance = tippy(element, {
  trigger: 'manual'
});

instance.show();
instance.hide();

Подходит для сложной логики отображения.

Параметр hideOnClick

Определяет, будет ли tooltip скрываться при клике.

hideOnClick: true

Варианты значений:

  • true — скрывать при любом клике
  • false — не скрывать
  • 'toggle' — переключать состояние

Пример:

tippy(element, {
  trigger: 'click',
  hideOnClick: 'toggle'
});

Параметр delay

Позволяет задать задержку перед показом и скрытием.

delay: 200

Или раздельно:

delay: [100, 300]

Где:

  • 100 мс — задержка перед показом
  • 300 мс — перед скрытием

Это помогает избежать “дёргания” интерфейса при случайных наведениях.

Параметр touch

Определяет поведение на сенсорных устройствах.

touch: true

Варианты:

  • true — использовать touch-события
  • false — игнорировать
  • 'hold' — показывать при долгом нажатии

Пример:

tippy(element, {
  touch: 'hold'
});

Параметр triggerTarget

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

tippy(targetElement, {
  triggerTarget: buttonElement
});

Это полезно, когда:

  • tooltip привязан к одному элементу
  • а событие происходит на другом

Параметр showOnCreate

Автоматически показывает tooltip сразу после создания.

showOnCreate: true

Используется в сценариях:

  • onboarding
  • подсказки при загрузке страницы

Параметр interactive

Влияет на взаимодействие с самим tooltip:

interactive: true

Если включено:

  • можно навести курсор на сам tooltip
  • он не исчезнет сразу

Часто используется вместе с click:

tippy(element, {
  trigger: 'click',
  interactive: true
});

Параметр interactiveBorder

Добавляет “зону безопасности” вокруг tooltip:

interactiveBorder: 10

Позволяет курсору слегка выходить за границы без скрытия.

Параметр interactiveDebounce

Добавляет задержку перед скрытием интерактивного tooltip:

interactiveDebounce: 75

Полезно для плавного UX при перемещении курсора.

Параметр onTrigger

Колбэк, вызываемый при срабатывании триггера:

onTrigger(instance, event) {
  console.log(event.type);
}

Позволяет:

  • отслеживать события
  • внедрять кастомную логику

Параметр onUntrigger

Вызывается при отмене триггера:

onUntrigger(instance, event) {
  console.log('Скрытие');
}

Практические сценарии использования

Hover-подсказка

tippy('.tooltip', {
  trigger: 'mouseenter focus',
  delay: [100, 100]
});

Tooltip по клику (popover)

tippy('.button', {
  trigger: 'click',
  interactive: true,
  hideOnClick: true
});

Программное управление

const tip = tippy('.custom', {
  trigger: 'manual'
});

document.querySelector('#open').oncl ick = () => tip.show();
document.querySelector('#close').oncl ick = () => tip.hide();

Поддержка мобильных устройств

tippy('.mobile', {
  touch: 'hold',
  delay: [500, 0]
});

Комбинирование параметров

Триггеры редко используются изолированно. На практике комбинируются:

  • trigger
  • delay
  • interactive
  • hideOnClick
  • touch

Пример:

tippy('.complex', {
  trigger: 'mouseenter click',
  interactive: true,
  delay: [200, 150],
  hideOnClick: 'toggle'
});

Поведенческие нюансы

  • При использовании click важно учитывать всплытие событий (event bubbling)
  • mouseenter не срабатывает на тач-устройствах без дополнительной настройки
  • focus критически важен для доступности (ARIA)
  • manual требует полного контроля со стороны разработчика

Оптимизация UX

  • Использование delay уменьшает случайные срабатывания
  • interactive делает tooltip полноценным UI-элементом
  • touch: 'hold' предотвращает конфликт с обычным тапом
  • комбинирование focus и mouseenter улучшает доступность

Ошибки и анти-паттерны

  • Использование только mouseenter без focus
  • Отсутствие interactive при кликовых tooltip
  • Игнорирование мобильных сценариев
  • Чрезмерное количество триггеров без необходимости

Взаимодействие с жизненным циклом

Триггеры напрямую влияют на:

  • onShow
  • onHide
  • onMount
  • onDestroy

Правильная настройка триггеров позволяет точно контролировать весь жизненный цикл tooltip.

Глубокая настройка через события DOM

Tippy.js использует стандартные DOM-события, поэтому можно вмешиваться:

element.addEventListener('click', (e) => {
  // кастомная логика
});

И комбинировать с:

trigger: 'manual'

Итоговая структура конфигурации триггеров

tippy(element, {
  trigger: 'mouseenter focus',
  hideOnClick: true,
  delay: [100, 200],
  touch: true,
  interactive: false,
  onTrigger(instance, event) {},
  onUntrigger(instance, event) {}
});

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

Оглавление