Хук onBeforeUpdate

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

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

Функция хука имеет следующую форму:

onBeforeUpdate(instance, partialProps) => void
  • instance – объект тултипа (TippyInstance), через который доступны методы управления, текущее состояние и элементы DOM.
  • partialProps – объект с новыми свойствами, которые будут применены к тултипу. Этот объект можно изменять, чтобы корректировать конфигурацию прямо перед обновлением.

Основные возможности

  1. Динамическое изменение настроек onBeforeUpdate позволяет изменять параметры тултипа в реальном времени, например, менять содержимое, позицию или анимацию в зависимости от внешних условий:
tippy('#button', {
  content: 'Начальное сообщение',
  onBeforeUpdate(instance, partialProps) {
    if (instance.state.isVisible) {
      partialProps.content = 'Обновлённое сообщение';
    }
  }
});
  1. Контроль условий обновления Можно использовать хук для предотвращения определённых изменений или фильтрации новых параметров:
tippy('#button', {
  content: 'Текст',
  onBeforeUpdate(instance, partialProps) {
    if (!partialProps.content) {
      partialProps.content = instance.props.content; // оставляем старое значение
    }
  }
});
  1. Логирование и отладка Хук идеально подходит для отслеживания того, какие свойства тултипа изменяются:
tippy('#button', {
  onBeforeUpdate(instance, partialProps) {
    console.log('Перед обновлением:', partialProps);
  }
});

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

  • onUpdate выполняется после применения изменений, тогда как onBeforeUpdate — до. Это позволяет подготовить конфигурацию и предотвратить нежелательные эффекты до обновления DOM.

  • onShow / onMount не вызываются при изменении свойств, если тултип уже отображён. onBeforeUpdate даёт возможность реагировать на любые изменения вне зависимости от состояния видимости.

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

  1. Адаптация позиции в зависимости от контента Если текст тултипа может изменяться динамически, onBeforeUpdate позволяет обновлять опцию placement:
tippy('#button', {
  content: 'Короткий текст',
  placement: 'top',
  onBeforeUpdate(instance, partialProps) {
    if (partialProps.content.length > 20) {
      partialProps.placement = 'bottom';
    }
  }
});
  1. Управление стилями через props Можно менять классы или анимацию до применения:
tippy('#button', {
  onBeforeUpdate(instance, partialProps) {
    if (instance.state.isVisible) {
      partialProps.animation = 'shift-away';
    }
  }
});
  1. Интеграция с динамическими данными При обновлении содержимого через внешний источник данных, хук позволяет корректировать тултип перед его рендерингом:
tippy('#button', {
  onBeforeUpdate(instance, partialProps) {
    partialProps.content = fetchLatestTooltipText();
  }
});

Важные нюансы

  • Изменение partialProps напрямую — основной способ управлять поведением тултипа. Необходимо помнить, что любые изменения применяются мгновенно при следующем обновлении.
  • Не вызывается при инициализации — onBeforeUpdate срабатывает только тогда, когда тултип уже создан и получает новые параметры через instance.setProps().
  • Доступ к текущему состоянию через instance.state позволяет делать более точные и безопасные обновления.

Пример комплексного применения

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

const tip = tippy(button, {
  content: 'Первоначальный текст',
  placement: 'top',
  onBeforeUpdate(instance, partialProps) {
    if (partialProps.content.includes('ошибка')) {
      partialProps.theme = 'error';
      partialProps.placement = 'bottom';
    } else {
      partialProps.theme = 'light';
    }
  }
});

// Позже обновляем содержимое тултипа
tip.setProps({ content: 'Произошла ошибка при загрузке' });

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

Хук onBeforeUpdate является мощным инструментом для гибкого управления динамическими изменениями в Tippy.js, обеспечивая контроль над поведением и внешним видом тултипов на уровне конфигурации перед их обновлением.

Оглавление