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

Библиотека Tippy.js предоставляет гибкую систему управления всплывающими подсказками с помощью параметра trigger. Стандартные значения триггеров включают 'mouseenter', 'click', 'focus' и 'manual'. Возможность комбинировать несколько триггеров расширяет контроль над поведением тултипов в сложных интерфейсах.

Указание нескольких триггеров

Для комбинирования триггеров необходимо передать строку с перечислением событий через пробел:

tippy('#button', {
  content: 'Комбинированный триггер',
  trigger: 'mouseenter focus'
});

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

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

Поведение при закрытии

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

  • Тултип закроется только тогда, когда все активные триггеры перестанут действовать.

  • Например, при триггерах 'mouseenter focus':

    • Наведение мыши открыло тултип.
    • Перемещение мыши за пределы элемента не закроет тултип, если элемент всё ещё в фокусе.
    • Тултип исчезнет только после того, как фокус уйдет и мышь покинет элемент.

Использование click с другими триггерами

Комбинация 'click' с другими триггерами требует особого внимания, так как click может конфликтовать с поведением 'mouseenter':

tippy('#icon', {
  content: 'Тултип при клике и наведении',
  trigger: 'mouseenter click'
});

В этом случае:

  • Наведение мыши откроет тултип, и он останется видимым после ухода курсора, если был произведён клик.
  • Клик будет переключать видимость тултипа, игнорируя текущее состояние 'mouseenter'.
  • Для сложных сценариев рекомендуется использовать опцию hideOnClick: false для контроля закрытия при клике.

Комбинация с 'manual' триггером

Триггер 'manual' позволяет управлять тултипом программно через API show(), hide(), toggle(). Его удобно комбинировать с другими событиями для сложной логики:

const tip = tippy('#input', {
  content: 'Только вручную или при фокусе',
  trigger: 'focus manual'
});

// Программное открытие
tip.show();

// Программное закрытие
tip.hide();

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

Ограничения и рекомендации

  1. Не использовать слишком много триггеров одновременно, чтобы не создавать неожиданных конфликтов.
  2. Комбинирование 'click' и 'mouseenter' следует тестировать на мобильных устройствах, где поведение событий может отличаться.
  3. Событие 'manual' всегда имеет приоритет над автоматическими триггерами. Если элемент имеет 'manual' вместе с другими триггерами, автоматическое закрытие может быть отключено.
  4. Для сложных интерфейсов рекомендуется комбинировать trigger с interactive: true и delay для более плавного и предсказуемого поведения.

Примеры практического применения

  • Форма с подсказками: тултипы открываются при наведении на поле или при фокусе на него, обеспечивая доступность клавиатурой.
  • Иконки с контекстной информацией: клик по иконке открывает тултип, но при наведении мыши он также показывается для удобства пользователей.
  • Сложные модальные подсказки: сочетание 'manual' и 'focus' позволяет показывать тултип только после определённых действий пользователя, а не автоматически при наведении.

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

Оглавление