Метод destroy

Метод destroy используется для полного удаления экземпляра всплывающей подсказки, созданной с помощью Tippy.js. Он освобождает все внутренние обработчики событий, стили и элементы DOM, связанные с конкретной подсказкой, предотвращая утечки памяти и позволяя полностью удалить компонент из страницы.

Синтаксис

tippyInstance.destroy();
  • tippyInstance — объект, возвращаемый функцией tippy(), представляющий конкретную подсказку.

Основные эффекты вызова destroy

  1. Удаление DOM-элементов Элемент подсказки, добавленный в DOM (popper), удаляется полностью. После вызова метода destroy попытка обращения к DOM-элементу через tippyInstance.popper вернет null или undefined.

  2. Снятие обработчиков событий Все слушатели событий, которые были установлены на целевой элемент (reference) и на саму подсказку (например, mouseenter, focus, click), удаляются. Это важно для предотвращения утечек памяти в крупных приложениях.

  3. Деактивация анимаций и таймеров Если для подсказки были установлены задержки показа/скрытия (delay), таймеры автоматически очищаются. Анимации исчезают немедленно без остаточных эффектов.

  4. Сброс состояния экземпляра Все свойства, связанные с подсказкой (visible, props, state), больше не актуальны. Попытка использовать метод show или hide на уничтоженном экземпляре приведет к ошибке или не даст эффекта.

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

// Создание подсказки
const button = document.querySelector('#myButton');
const tip = tippy(button, {
  content: 'Это подсказка',
  placement: 'top',
});

// Показ подсказки
tip.show();

// Полное удаление подсказки
tip.destroy();

// После destroy методы show/hide не работают
tip.show(); // ничего не происходит

Частые сценарии применения

  • Динамическое удаление элементов Когда целевой элемент удаляется из DOM, необходимо вызвать destroy, чтобы очистить все связанные ресурсы.

    const dynamicButton = document.querySelector('.dynamic-btn');
const tip = tippy(dynamicButton, { content: 'Временная подсказка' });

// Позже элемент удаляется
dynamicButton.remove();
tip.destroy();

  • Пересоздание подсказок с новыми настройками Иногда требуется изменить конфигурацию подсказки. Вместо изменения старого экземпляра проще уничтожить старый и создать новый:

    const tip = tippy(button, { content: 'Старая подсказка' });
tip.destroy();
const newTip = tippy(button, { content: 'Новая подсказка', placement: 'bottom' });

  • Очистка ресурсов при SPA (Single Page Application) В приложениях с динамической навигацией destroy помогает предотвращать накопление неиспользуемых подсказок при переходах между страницами.

Важные нюансы

  • Множественные экземпляры Если к одному элементу применяются несколько Tippy-подсказок, destroy удаляет только конкретный экземпляр. Остальные продолжают работать.

  • Взаимодействие с коллекциями Для удаления всех подсказок, созданных через селектор:

    const tips = tippy('.has-tooltip', { content: 'Подсказка' });
tips.forEach(tip => tip.destroy());

  • Необратимость После вызова destroy экземпляр нельзя восстановить. Для нового использования необходимо создавать новый объект через tippy().

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

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

Оглавление