Хук onHide

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

Сигнатура и параметры

onHide принимает одну функцию обратного вызова с одним аргументом — объектом instance, представляющим текущий тултип:

tippy(targetElement, {
  content: 'Пример тултипа',
  onHide(instance) {
    console.log('Тултип скрыт', instance);
  }
});

instance — объект, предоставляющий доступ к внутренним свойствам тултипа: reference, popper, state, props и методам управления (hide(), show(), destroy()).

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

Срабатывание после начала скрытия onHide вызывается после того, как инициировано скрытие тултипа, но до завершения анимации, если она настроена через animation.
Взаимодействие с preventDefault() Внутри onHide можно отменить скрытие, используя метод instance.hide() в комбинации с проверкой условий. Например:

tippy(targetElement, {
  content: 'Подтверждение',
  onHide(instance) {
    if (!confirm('Закрыть тултип?')) {
      return false; // предотвращает скрытие
    }
  }
});

Важно: для правильного предотвращения скрытия следует использовать версию Tippy.js с поддержкой onHide как функции с возвратом false. В старых версиях это может не работать.

Доступ к состоянию тултипа Через instance.state можно получить текущее состояние видимости тултипа:

tippy(targetElement, {
  onHide(instance) {
    if (instance.state.isVisible) {
      console.log('Тултип ещё видим');
    } else {
      console.log('Тултип уже скрыт');
    }
  }
});

instance.state.isVisible — boolean, указывает на видимость тултипа.
instance.state.isDestroyed — boolean, показывает, уничтожен ли тултип.
instance.state.mounted — boolean, определяет, смонтирован ли DOM элемент тултипа.

Использование с анимацией

При настройке анимации через animation и duration хук onHide полезен для синхронизации действий с моментом завершения скрытия:

tippy(targetElement, {
  content: 'Анимация скрытия',
  animation: 'scale',
  duration: 500,
  onHide(instance) {
    console.log('Анимация завершена, тултип скрыт');
  }
});

duration — время в миллисекундах для анимации скрытия.
onHide вызывается после запуска анимации, а не после её завершения. Для точного отслеживания конца анимации можно использовать onHidden.

Примеры практического применения

Очистка динамического контента

tippy(targetElement, {
  content: document.createElement('div'),
  allowHTML: true,
  onHide(instance) {
    instance.setContent(''); // очищаем содержимое
  }
});

Логирование действий пользователя

tippy(targetElement, {
  content: 'Информация',
  onHide(instance) {
    console.log(`Тултип для элемента ${instance.reference.id} был закрыт`);
  }
});

Интеграция с другими библиотеками

tippy(targetElement, {
  content: 'Интерактивный тултип',
  interactive: true,
  onHide(instance) {
    someAnalytics.track('tooltip_hidden', { id: instance.reference.id });
  }
});

Взаимодействие с другими хуками

onShow — вызывается до отображения тултипа. Используется совместно для контроля полного жизненного цикла.
onHidden — срабатывает после того, как тултип полностью скрыт и анимация завершена. Отличие от onHide: onHide запускается в момент инициирования скрытия, а onHidden — после завершения процесса.

Пример комбинирования:

tippy(targetElement, {
  onHide(instance) {
    console.log('Начало скрытия');
  },
  onHidden(instance) {
    console.log('Тултип полностью скрыт');
  }
});