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

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

Настройка триггеров

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

  • Строку с названием события — одно или несколько через пробел, например:
tippy('#button', {
  content: 'Пример подсказки',
  trigger: 'click focus'
});

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

Режим manual и управление программно

Для максимальной гибкости Tippy.js предоставляет триггер manual, который не привязывает тултип к событиям DOM, позволяя управлять показом и скрытием через методы API:

const instance = tippy('#button', {
  content: 'Тултип с ручным управлением',
  trigger: 'manual'
});

// Показ тултипа
instance.show();

// Скрытие тултипа
instance.hide();

// Переключение состояния
instance.toggle();

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

Пользовательские события

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

const btn = document.querySelector('#customBtn');
const tooltip = tippy(btn, {
  content: 'Тултип на кастомное событие',
  trigger: 'manual'
});

btn.addEventListener('dblclick', () => {
  tooltip.show();
});

btn.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // предотвращаем стандартное меню
  tooltip.hide();
});

Здесь двойной клик открывает тултип, а правая кнопка мыши закрывает его. Такой подход полностью снимает зависимость от стандартных DOM-событий.

Комбинация стандартных и кастомных триггеров

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

const tooltip = tippy('#multiTrigger', {
  content: 'Комбинированный тултип',
  trigger: 'mouseenter manual'
});

document.querySelector('#multiTrigger').addEventListener('click', () => {
  tooltip.show();
});

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

События открытия и закрытия

При работе с пользовательскими триггерами особенно полезны колбэки событий Tippy.js:

  • onShow(instance) — вызывается перед показом тултипа.
  • onShown(instance) — после отображения.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.

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

tippy('#btn', {
  content: 'События тултипа',
  trigger: 'manual',
  onShow(instance) {
    console.log('Тултип собирается показать');
  },
  onHide(instance) {
    console.log('Тултип собирается скрыться');
  }
});

Особенности взаимодействия с другими библиотеками

При интеграции с UI-фреймворками или кастомными компонентами (например, React, Vue) часто возникает необходимость синхронизации событий между библиотеками. В Tippy.js достаточно использовать manual триггер и вызывать методы show и hide из жизненного цикла компонента:

// Vue
<template>
  <button ref="btn">Кнопка с тултипом</button>
</template>

<script>
import tippy from 'tippy.js';

export default {
  mounted() {
    this.tooltip = tippy(this.$refs.btn, {
      content: 'Vue тултип',
      trigger: 'manual'
    });
  },
  methods: {
    openTooltip() {
      this.tooltip.show();
    },
    closeTooltip() {
      this.tooltip.hide();
    }
  }
}
</script>

Ключевые моменты

  • trigger определяет события для открытия/закрытия тултипа.
  • manual позволяет полностью управлять тултипом программно.
  • Методы show, hide, toggle и события onShow, onHide дают полный контроль.
  • Пользовательские события можно привязывать через обработчики DOM, вызывая методы тултипа.
  • Комбинация стандартных и кастомных триггеров повышает гибкость интерфейса.
  • Встраивание в фреймворки проще через ручное управление, что предотвращает конфликты с внутренними событиями компонентов.

Эта система триггеров делает Tippy.js мощным инструментом для создания интерактивных, адаптивных и точно управляемых подсказок.

Оглавление