Контекст выполнения хуков

Tippy.js предоставляет мощный механизм для кастомизации поведения тултипов через хуки (hooks). Понимание контекста их выполнения позволяет создавать сложные интерактивные элементы с точным управлением жизненным циклом тултипа.

Основные хуки и их контексты

В Tippy.js есть несколько категорий хуков:

  1. onCreate — вызывается один раз при создании экземпляра тултипа. Контекст выполнения:

    • this указывает на текущий экземпляр тултипа (tippy instance).
    • Доступны свойства: reference, popper, state, props.
    • Можно инициализировать дополнительные данные или добавить кастомные слушатели событий.

  2. onShow — срабатывает перед отображением тултипа. Контекст:

    • this указывает на экземпляр тултипа.
    • Параметр instance.state содержит текущее состояние (isVisible, isMounted).
    • Можно предотвратить показ тултипа, возвращая false в onShow.

  3. onMount — вызывается после того, как тултип полностью смонтирован в DOM. Контекст:

    • this — экземпляр тултипа.
    • Доступ к DOM-элементу через instance.popper.
    • Используется для анимаций, вычислений позиции или динамического наполнения контента.

  4. onHidden — срабатывает после скрытия тултипа. Контекст:

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

  5. onDestroy — вызывается при уничтожении тултипа. Контекст:

    • Позволяет корректно удалить все слушатели и очистить ресурсы.
    • В this.state доступны все свойства тултипа перед удалением.

Особенности контекста

  • this всегда ссылается на экземпляр тултипа, что позволяет обращаться к его методам и состоянию без необходимости захватывать переменные из внешней области.
  • Контекст хуков не меняется при использовании стрелочных функций, поэтому для сохранения ссылок на тултип внутри стрелочных функций можно использовать замыкания или хранить ссылку через переменную:
const tip = tippy('#btn', {
  content: 'Пример',
  onShow(instance) {
    console.log(this === instance); // true
  },
});

Доступ к состоянию и свойствам через контекст

Каждый хук предоставляет доступ к объекту state и props:

  • state.isVisible — видимость тултипа.
  • state.isMounted — смонтирован ли тултип в DOM.
  • state.interactive — поддержка интерактивного контента.
  • props.content — текущий контент тултипа.
  • props.placement — позиция относительно целевого элемента.

Пример динамической модификации контента через контекст:

tippy('#btn', {
  content: 'Начальный текст',
  onShow(instance) {
    if (!instance.state.customized) {
      instance.setContent('Обновлённый текст');
      instance.state.customized = true;
    }
  },
});

Взаимодействие хуков с методами тултипа

Методы экземпляра доступны через контекст:

  • instance.show() — отображение тултипа.
  • instance.hide() — скрытие.
  • instance.setContent(newContent) — динамическое изменение контента.
  • instance.destroy() — удаление тултипа.

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

tippy('#btn', {
  content: 'Нажми меня',
  onMount(instance) {
    setTimeout(() => instance.hide(), 2000); // автоматическое скрытие через 2 секунды
  },
});

Советы по работе с контекстом

  1. Избегать утечек памяти — все динамические обработчики внутри хуков следует удалять в onHidden или onDestroy.
  2. Хранение пользовательских данных — можно добавлять свойства в instance.state для отслеживания состояния между хуками.
  3. Синхронизация с DOM — любые манипуляции с instance.popper выполняются в onMount, чтобы быть уверенным, что элемент уже в DOM.

Примеры комплексного использования

tippy('#btn', {
  content: 'Интерактивный тултип',
  interactive: true,
  onShow(instance) {
    instance.setContent(`Сейчас: ${new Date().toLocaleTimeString()}`);
  },
  onMount(instance) {
    instance.popper.style.border = '2px solid #4CAF50';
  },
  onHidden(instance) {
    console.log('Тултип скрыт');
  },
});

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

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

Оглавление