Хук onDestroy

В библиотеке Tippy.js хук onDestroy является одним из жизненных циклов тултипа, предоставляющим возможность выполнить определённые действия в момент уничтожения экземпляра тултипа. Этот хук вызывается один раз при полном удалении тултипа с элемента, после чего экземпляр больше не может быть использован.

Подключение и использование

Для использования onDestroy необходимо передавать его в объект конфигурации при инициализации тултипа:

tippy('#myButton', {
  content: 'Пример тултипа',
  onDestroy(instance) {
    console.log('Тултип уничтожен:', instance);
  }
});

Здесь instance — это объект тултипа, содержащий всю информацию о текущем состоянии:

  • reference — элемент, к которому привязан тултип
  • popper — DOM-элемент тултипа
  • state — внутреннее состояние тултипа, включая флаги visible, mounted
  • props — текущие свойства тултипа

Практические сценарии применения

  1. Очистка динамического контента Если содержимое тултипа создавалось динамически, onDestroy позволяет корректно удалить все временные элементы или обработчики событий.
tippy('#dynamicButton', {
  content: document.createElement('div'),
  onDestroy(instance) {
    instance.popper.innerHTML = '';
  }
});
  1. Отмена подписок и таймеров Хук полезен для остановки любых асинхронных процессов, связанных с тултипом:
let intervalId = setInterval(() => console.log('Тултип активен'), 1000);

tippy('#timerButton', {
  content: 'Тултип с таймером',
  onDestroy(instance) {
    clearInterval(intervalId);
  }
});
  1. Интеграция с внешними библиотеками Если тултип содержит сторонние виджеты (например, графики, редакторы), onDestroy можно использовать для корректного вызова их методов очистки:
tippy('#chartButton', {
  content: '<div id="chart"></div>',
  allowHTML: true,
  onDestroy(instance) {
    destroyChart(document.getElementById('chart'));
  }
});

Связь с другими хуками

  • onCreate — вызывается один раз при инициализации тултипа
  • onMount / onShow — вызываются при каждом отображении тултипа
  • onHide / onUnmount — вызываются при скрытии тултипа

Хук onDestroy отличается тем, что он не вызывается при каждом закрытии тултипа, а только при полном удалении экземпляра через метод destroy().

const instance = tippy('#destroyButton', {
  content: 'Будет уничтожен'
});

// Позднее
instance.destroy(); // вызовет onDestroy один раз

Особенности работы

  • Вызов onDestroy гарантирован после того, как тултип полностью удалён из DOM.
  • После срабатывания хука объект instance больше не пригоден для повторного использования.
  • Внутри onDestroy доступна вся информация об экземпляре, что позволяет безопасно очищать любые связанные ресурсы.

Советы по использованию

  • Использовать onDestroy для освобождения памяти при работе с большим количеством тултипов.
  • Не пытаться показывать тултип повторно внутри onDestroy. Это приведет к ошибкам.
  • При интеграции с фреймворками (React, Vue, Svelte) хук помогает корректно синхронизировать состояние компонента и тултипа.

Пример комплексного применения

const instance = tippy('#complexButton', {
  content: '<div class="tooltip-content">Контент</div>',
  allowHTML: true,
  onShow(instance) {
    console.log('Тултип показан');
  },
  onHide(instance) {
    console.log('Тултип скрыт');
  },
  onDestroy(instance) {
    console.log('Тултип уничтожен, очищаем DOM и события');
    instance.popper.querySelector('.tooltip-content').remove();
  }
});

// Через некоторое время полностью уничтожаем тултип
setTimeout(() => {
  instance.destroy();
}, 5000);

В этом примере:

  • onShow и onHide управляют видимостью
  • onDestroy освобождает ресурсы, удаляя динамический контент и предотвращая утечки памяти

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

Оглавление