Метод unmount

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

Основное назначение

Метод unmount выполняет несколько ключевых задач:

  1. Удаление элемента тултипа из DOM После вызова unmount визуальная часть тултипа исчезает, и соответствующий HTML-элемент удаляется.

  2. Очистка внутренних слушателей и таймеров Все обработчики событий, которые Tippy.js навесил на целевой элемент (reference) или на тултип, автоматически удаляются. Это предотвращает непреднамеренное срабатывание событий после удаления тултипа.

  3. Остановка анимаций и переходов Если тултип находился в состоянии анимации (например, при animation: 'fade' или animation: 'scale'), метод unmount мгновенно завершает анимацию и убирает элемент, не дожидаясь окончания перехода.

Синтаксис

tippyInstance.unmount();
  • tippyInstance — экземпляр Tippy.js, созданный через функцию tippy().
  • Метод не принимает аргументов.
  • После вызова метода экземпляр тултипа не удаляется из памяти полностью, но становится неактивным и не отображает интерфейс.

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

Создание тултипа и его последующее удаление:

const button = document.querySelector('#myButton');

const tip = tippy(button, {
  content: 'Пример тултипа',
  placement: 'right',
});

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

// Удаление тултипа через 3 секунды
setTimeout(() => {
  tip.unmount();
}, 3000);

После вызова tip.unmount() тултип исчезнет с экрана, а события, такие как mouseenter и mouseleave, больше не будут работать.

Разница между destroy и unmount

Важно понимать различие между методами unmount и destroy:

Метод Действие Состояние экземпляра
unmount() Убирает тултип с DOM, очищает слушатели, но оставляет экземпляр живым Можно вызвать mount() для повторного показа тултипа
destroy() Полностью удаляет тултип, освобождает память и делает экземпляр недействительным Невозможно повторно использовать экземпляр

Таким образом, unmount используется для временного скрытия или отключения тултипа без удаления объекта, а destroy — для полного удаления.

Повторное монтирование

После вызова unmount() тултип можно восстановить с помощью метода mount():

tip.unmount(); // Убираем тултип
tip.mount();   // Восстанавливаем тултип на элементе

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

Особенности и рекомендации

  • unmount() не очищает контент, если он был динамически изменен через setContent(). Контент остаётся доступным при последующем mount().
  • Метод безопасно использовать при динамически создаваемых элементах, так как он предотвращает утечки памяти.
  • Для тултипов с интерактивным содержимым метод гарантирует, что все обработчики внутри тултипа будут сняты, что предотвращает ошибки при повторном использовании.

Пример с динамическим контентом

const input = document.querySelector('#myInput');

const tip = tippy(input, {
  content: 'Введите текст',
  interactive: true,
  trigger: 'focus',
});

// Обновление контента
tip.setContent('Теперь можно вводить числа');

// Убираем тултип
tip.unmount();

// Позже восстанавливаем
tip.mount();

Метод unmount не сбрасывает динамически обновлённый контент, что делает его удобным для повторного использования тултипа без полной инициализации.

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

Оглавление