Хук onHidden

onHidden — это один из жизненно важных хуков библиотеки Tippy.js, который срабатывает после полного скрытия всплывающей подсказки (tooltip). Он отличается от onHide, который запускается в момент начала анимации скрытия. onHidden позволяет выполнять действия, которые должны произойти только после того, как tooltip полностью исчезнет с экрана и все связанные с ним DOM-элементы возвращены в исходное состояние.

Синтаксис использования

tippy(referenceElement, {
  content: 'Пример tooltip',
  onHidden(instance) {
    console.log('Tooltip полностью скрыт', instance);
  }
});
  • referenceElement — элемент DOM, к которому привязывается tooltip.
  • instance — объект Tippy.js, представляющий текущую подсказку. Через него можно управлять поведением tooltip или получать его состояние.

Отличие onHidden от других хуков

Tippy.js предоставляет несколько событийных хуков для управления жизненным циклом tooltip:

Хук Момент срабатывания
onShow Перед началом появления tooltip
onShown После того как tooltip полностью отображён
onHide Перед началом скрытия tooltip
onHidden После того как tooltip полностью исчез и скрыт из DOM

Главное отличие onHidden — возможность безопасно выполнять операции только когда tooltip окончательно не виден, например, удаление временных элементов или сброс состояний.

Практические сценарии использования

1. Очистка динамического содержимого

Если tooltip содержит динамически добавленные элементы, можно использовать onHidden для их удаления:

tippy('#button', {
  content: '<div id="temp-content">Динамический контент</div>',
  allowHTML: true,
  onHidden(instance) {
    const temp = document.getElementById('temp-content');
    if (temp) temp.remove();
  }
});

В этом примере элементы DOM удаляются только после полной анимации скрытия.

2. Сброс стилей и классов

Tooltip может изменять классы или стили на связанных элементах. После скрытия эти изменения можно отменить через onHidden:

tippy('#icon', {
  content: 'Подсказка с эффектом',
  onShow(instance) {
    instance.reference.classList.add('highlight');
  },
  onHidden(instance) {
    instance.reference.classList.remove('highlight');
  }
});
  • onShow добавляет визуальный эффект.
  • onHidden гарантирует его удаление после исчезновения tooltip.

3. Управление сложной логикой интерфейса

Когда tooltip используется для отображения интерактивного контента (например, меню или формы), onHidden позволяет запускать дополнительные функции, не прерывая анимацию:

tippy('#menu-button', {
  content: '<div class="menu">Меню</div>',
  interactive: true,
  onHidden(instance) {
    console.log('Меню закрыто, можно выполнять дополнительные действия');
    cleanupMenu();
  }
});

interactive: true позволяет взаимодействовать с элементами внутри tooltip, а onHidden срабатывает только после окончательного закрытия, что важно для корректного удаления или деинициализации меню.

Передача параметров и работа с instance

Объект instance предоставляет полный контроль над tooltip:

  • instance.hide() — программно скрыть tooltip.
  • instance.setContent(newContent) — изменить содержимое.
  • instance.state.isVisible — проверить текущее состояние.

Пример с программным управлением:

const tip = tippy('#info', {
  content: 'Информация',
  onHidden(instance) {
    if (!instance.state.isVisible) {
      console.log('Tooltip окончательно скрыт');
    }
  }
});

document.querySelector('#hide-btn').addEventListener('click', () => {
  tip[0].hide();
});

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

  • onHidden не срабатывает, если tooltip ещё не был показан. Следует учитывать это при работе с динамически создаваемыми экземплярами.
  • Для анимаций и асинхронных операций это лучший момент для очистки ресурсов.
  • Можно комбинировать с onShow и onHide для полного контроля жизненного цикла tooltip.

onHidden обеспечивает безопасное завершение работы tooltip и является идеальным инструментом для очистки DOM, отмены стилей и выполнения финальных действий после исчезновения подсказки. Его правильное использование повышает стабильность интерфейса и предотвращает накопление лишних элементов или классов.

Оглавление