Управление жизненным циклом

Для создания тултипа в Tippy.js используется функция tippy(), которая принимает два аргумента: селектор элемента (или массив элементов) и объект с опциями. Пример базовой инициализации:

tippy('.btn', {
  content: 'Пример тултипа',
  placement: 'top',
  arrow: true,
  delay: [100, 100]
});

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

  • content — текст или HTML-содержимое тултипа.
  • placement — позиция относительно элемента (top, bottom, left, right и их вариации).
  • arrow — отображение стрелки.
  • delay — задержка появления и скрытия.

Каждый вызов tippy() возвращает объект или массив объектов с методами для управления тултипами.

Методы управления тултипом

Объект Tippy содержит методы, позволяющие контролировать тултип в любой момент:

  • show() — немедленное отображение тултипа.
  • hide() — скрытие тултипа.
  • toggle() — переключение видимости.
  • destroy() — удаление тултипа и всех обработчиков событий.
  • setContent(newContent) — обновление содержимого тултипа после инициализации.
  • enable() / disable() — включение или отключение тултипа без удаления.

Пример динамического изменения содержания:

const tip = tippy('.btn', { content: 'Начальный текст' })[0];
tip.setContent('Обновлённый текст');
tip.show();

Жизненный цикл тултипа

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

  • onShow(instance) — вызывается перед показом тултипа. Можно отменить показ, вернув false.
  • onShown(instance) — вызывается после полного отображения.
  • onHide(instance) — вызывается перед скрытием. Можно отменить скрытие.
  • onHidden(instance) — вызывается после скрытия.
  • onMount(instance) — вызывается после добавления тултипа в DOM.
  • onTrigger(instance, event) — при срабатывании триггера (например, hover или click).
  • onUntrigger(instance, event) — при уходе с триггерного элемента.

Пример использования событий:

tippy('.btn', {
  content: 'Тултип с событиями',
  onShow(instance) {
    console.log('Появление тултипа');
  },
  onHidden(instance) {
    console.log('Тултип скрыт');
  }
});

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

Динамическая инициализация

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

document.body.addEventListener('mouseover', (e) => {
  if (e.target.matches('.dynamic-btn') && !e.target._tippy) {
    tippy(e.target, { content: 'Динамический тултип' });
  }
});

Ключевой момент — проверка !e.target._tippy, чтобы не создавать повторно тултип для одного и того же элемента.

Интеграция с компонентами

Tippy можно использовать с фреймворками и UI-компонентами, управляя жизненным циклом вручную:

  • При рендере компонента создаётся тултип.
  • При удалении компонента необходимо вызывать destroy() для корректного освобождения ресурсов.
  • Можно использовать реактивные методы для обновления содержимого через setContent().

Пример с динамическим обновлением:

const tip = tippy('#reactive-btn', { content: 'Старт' })[0];

// Обновление через время
setTimeout(() => {
  tip.setContent('Обновлено через 2 секунды');
}, 2000);

// Очистка перед удалением
document.querySelector('#remove-btn').addEventListener('click', () => {
  tip.destroy();
});

Асинхронное обновление содержимого

Tippy поддерживает асинхронные данные. Это удобно для загрузки информации с сервера перед показом тултипа:

tippy('.async-btn', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/data')
      .then(res => res.text())
      .then(data => {
        instance.setContent(data);
      });
  }
});

Здесь onShow позволяет показывать предварительный текст, а затем подставлять результат запроса.

Множественные тултипы и управление группами

Для группы элементов можно использовать массив объектов Tippy:

const tips = tippy('.btn-group', { content: 'Групповой тултип' });

tips.forEach(tip => {
  tip.show();
});

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

Оптимизация и производительность

  • Использование delay и interactive предотвращает лишние вызовы.
  • appendTo: document.body уменьшает конфликты с CSS-позиционированием.
  • lazy и динамическая инициализация сокращают время загрузки при большом количестве элементов.
  • Вызов destroy() после окончания жизни тултипа предотвращает утечки памяти.

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

Оглавление