Хук onBeforeMount

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

Синтаксис и структура

tippy(targets, {
  content: 'Пример тултипа',
  onBeforeMount(instance) {
    // Логика перед монтированием
  }
});

  • instance — объект тултипа, содержащий все текущие параметры и методы управления тултипом.

  • Внутри функции можно обращаться к:

    • instance.popper — DOM-элемент тултипа (ещё не добавлен в документ).
    • instance.props — объект с текущими настройками тултипа.
    • instance.state — объект состояния тултипа.

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

  1. Изменение контента перед рендером Можно динамически задавать текст или HTML до того, как тултип будет вставлен в DOM:
tippy('#button', {
  onBeforeMount(instance) {
    instance.setContent('Динамический контент: ' + new Date().toLocaleTimeString());
  }
});
  1. Модификация свойств тултипа Настройки, такие как placement, animation или theme, можно менять прямо перед монтированием:
tippy('#icon', {
  onBeforeMount(instance) {
    if (window.innerWidth < 600) {
      instance.setProps({ placement: 'bottom' });
    }
  }
});
  1. Подготовка состояния или данных Этот хук удобен для вычислений, запросов данных или подготовки условий, которые влияют на тултип:
tippy('.item', {
  onBeforeMount(instance) {
    const dataId = instance.reference.dataset.id;
    instance.setContent(`ID элемента: ${dataId}`);
  }
});

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

  • onCreate: вызывается сразу после создания экземпляра, до рендера, но onBeforeMount точнее для подготовки DOM.
  • onMount: вызывается после вставки тултипа в DOM, когда он уже видим или готов к анимации.
  • onShow: срабатывает при отображении тултипа, но к этому моменту его содержимое и положение уже определены.

Практические рекомендации

  • Использовать для динамической генерации контента или изменения стилей перед рендером.
  • Не полагаться на instance.popper для работы с DOM напрямую — на момент вызова он ещё не в документе. Для изменений DOM лучше применять onMount.
  • Идеально подходит для условий, которые влияют на настройки тултипа, но должны быть применены до того, как тултип станет видимым.

Пример комплексного использования

tippy('.tooltip-target', {
  placement: 'top',
  animation: 'fade',
  onBeforeMount(instance) {
    // Изменяем цвет темы для мобильных устройств
    if (window.innerWidth < 500) {
      instance.setProps({ theme: 'light' });
    }

    // Динамический контент
    const value = instance.reference.dataset.value;
    instance.setContent(`Текущее значение: ${value}`);
  }
});

В этом примере хук onBeforeMount одновременно управляет внешним видом тултипа и его содержимым, делая поведение адаптивным и динамичным.

Хук onBeforeMount обеспечивает контролируемое и безопасное вмешательство в состояние тултипа до его появления в DOM, что делает его незаменимым для сложных интерфейсов и динамических приложений.

Оглавление