Хук onShown

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

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

tippy(targetElement, {
  content: 'Пример тултипа',
  onShown(instance) {
    console.log('Тултип показан:', instance);
  }
});
  • targetElement – элемент DOM, к которому прикрепляется тултип.
  • content – содержимое тултипа (строка, HTML или функция).
  • onShown – функция обратного вызова, принимающая инстанс тултипа в качестве аргумента.

Инстанс содержит все данные и методы тултипа, включая:

  • instance.popper – DOM-элемент тултипа.
  • instance.state – текущее состояние тултипа (показан/скрыт).
  • instance.setContent(newContent) – метод динамической замены содержимого.
  • instance.hide() / instance.show() – методы управления видимостью.

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

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

Хук Момент срабатывания
onShow До начала анимации показа
onShown После завершения анимации, тултип полностью видим
onHide До начала анимации скрытия
onHidden После завершения анимации скрытия

Ключевое отличие onShown – доступ к полностью визуально отрисованному тултипу, что особенно важно для:

  • Анимаций внутренних элементов.
  • Получения размеров тултипа.
  • Динамической подгонки позиции после рендеринга.

Доступ к DOM тултипа

После срабатывания onShown можно работать с самим DOM тултипа:

tippy('#button', {
  content: 'Подробности',
  onShown(instance) {
    const tooltipElement = instance.popper;
    tooltipElement.style.backgroundColor = 'rgba(0, 128, 255, 0.8)';
    tooltipElement.querySelector('div').textContent = 'Обновлённое содержимое';
  }
});

Здесь:

  • instance.popper возвращает корневой элемент тултипа.
  • Внутренний контейнер можно модифицировать через querySelector.

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

  1. Запуск анимации внутри тултипа
tippy('#icon', {
  content: '<div class="tooltip-animation">Текст</div>',
  allowHTML: true,
  onShown(instance) {
    const animationEl = instance.popper.querySelector('.tooltip-animation');
    animationEl.classList.add('fade-in');
  }
});
  1. Подгонка позиции после рендеринга

Иногда тултип может иметь динамическое содержимое, которое меняет размеры. В onShown можно вызвать метод instance.popperInstance.update() для корректного позиционирования.

tippy('#dynamic', {
  content: 'Динамический контент',
  onShown(instance) {
    instance.popperInstance.update();
  }
});
  1. Отправка аналитики
tippy('#track', {
  content: 'Информация',
  onShown(instance) {
    console.log('Тултип показан для аналитики', instance.reference.id);
  }
});

Рекомендации по использованию

  • Для большинства визуальных изменений предпочтительно использовать onShown, так как тултип уже полностью отрисован.
  • Не использовать тяжелые вычисления в onShown, чтобы не блокировать интерфейс во время отображения.
  • Для динамического изменения размеров или положения тултипа применять instance.popperInstance.update().
  • При работе с HTML-контентом убедиться, что allowHTML: true, иначе внутренняя разметка не будет корректно отображаться.

Совместимость с другими хуками

onShown может работать совместно с onShow и onHidden, что позволяет:

  • Инициализировать подготовительные данные в onShow.
  • Запустить визуальные эффекты в onShown.
  • Очистить ресурсы или отменить события в onHidden.
tippy('#element', {
  content: 'Пример',
  onShow() { console.log('Подготовка'); },
  onShown() { console.log('Отображено'); },
  onHidden() { console.log('Скрыто'); }
});

В результате последовательность вызовов: onShow → анимация → onShown → onHidden после закрытия.

Вывод

Хук onShown обеспечивает доступ к полностью отрисованному тултипу и является оптимальным местом для:

  • Анимаций элементов внутри тултипа.
  • Динамического изменения содержимого и стилей.
  • Корректировки положения после изменения размеров. Использование этого события делает интерфейс более интерактивным и гибким при работе с Tippy.js.
Оглавление