Хук onAfterUpdate

Хук onAfterUpdate является одной из ключевых возможностей Tippy.js для управления поведением тултипов после их обновления. Он срабатывает каждый раз после того, как тултип был обновлён с помощью метода setProps или автоматического обновления внутренних данных, позволяя выполнять дополнительную логику сразу после применения новых параметров.

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

tippy(targetElement, {
  content: 'Пример тултипа',
  onAfterUpdate(instance) {
    console.log('Тултип обновлён', instance);
  }
});
  • instance — объект тултипа, содержащий все актуальные свойства и методы (show, hide, setContent, setProps и т.д.).
  • Хук вызывается после применения всех изменений, включая пересчёт позиции и обновление DOM.

Отличие от onUpdate

Важно понимать разницу между onUpdate и onAfterUpdate:

  • onUpdate срабатывает во время обновления, до применения изменений к DOM.
  • onAfterUpdate срабатывает после завершения обновления, когда новые свойства уже полностью отражены в тултипе.

Это делает onAfterUpdate идеальным для действий, зависящих от актуальной разметки и размеров тултипа.

Практические сценарии применения

  1. Динамическая адаптация содержимого и стилей
tippy('#btn', {
  content: 'Нажми меня',
  onAfterUpdate(instance) {
    if (instance.props.content.length > 10) {
      instance.popper.style.backgroundColor = 'lightblue';
    }
  }
});

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

  1. Пересчёт позиционирования с учётом внешних изменений

Если DOM вокруг тултипа динамически изменяется (например, добавляются новые элементы, изменяется размер контейнера), можно использовать onAfterUpdate для повторного расчёта позиции:

tippy('#icon', {
  content: 'Информация',
  onAfterUpdate(instance) {
    instance.popperInstance.update();
  }
});
  1. Интеграция с анимациями и внешними библиотеками

Можно запускать внешние анимации или вычисления размеров только после того, как тултип полностью обновлён:

tippy('#image', {
  content: '<div class="tooltip-content">Подсказка</div>',
  allowHTML: true,
  onAfterUpdate(instance) {
    animateTooltip(instance.popper.querySelector('.tooltip-content'));
  }
});

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

  • Несколько вызовов подряд: Если setProps вызывается несколько раз, хук onAfterUpdate будет срабатывать после каждого обновления.
  • Доступ к актуальным props: Внутри функции доступны все текущие свойства тултипа через instance.props.
  • Не блокирует рендер: Вызов хука происходит асинхронно после внутреннего обновления, поэтому он не тормозит показ тултипа.

Сочетание с другими хуками

onAfterUpdate часто используют совместно с onShow и onMount для комплексного управления тултипом:

  • onMount — вызывается при монтировании тултипа в DOM.
  • onShow — вызывается при отображении тултипа.
  • onAfterUpdate — вызывается после любых изменений его свойств.
tippy('#example', {
  content: 'Данные обновлены',
  onMount(instance) {
    console.log('Тултип смонтирован');
  },
  onShow(instance) {
    console.log('Тултип отображается');
  },
  onAfterUpdate(instance) {
    console.log('Тултип обновлён с новыми props:', instance.props);
  }
});

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

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

  • Использовать onAfterUpdate, когда требуется работать с уже обновлённым DOM тултипа.
  • Избегать долгих синхронных вычислений внутри хука, чтобы не блокировать интерфейс.
  • Проверять актуальные свойства через instance.props, вместо сохранения локальных копий, чтобы всегда иметь достоверные данные.
  • Для динамического позиционирования тултипа после изменения родительских элементов вызывать instance.popperInstance.update().

onAfterUpdate — мощный инструмент, позволяющий гибко управлять поведением тултипов в реальном времени, особенно в условиях динамически изменяющихся интерфейсов.

Оглавление