Хук onCreate

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

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

tippy('#myButton', {
  content: 'Пример тултипа',
  onCreate(instance) {
    console.log('Tippy создан', instance);
  }
});
  • instance — объект тултипа, содержащий все свойства и методы Tippy.js.
  • Срабатывает один раз на элементе при инициализации, вне зависимости от того, будет тултип показан или нет.

Объект instance

Объект instance, передаваемый в onCreate, включает ключевые свойства и методы:

  • reference — DOM-элемент, к которому привязан тултип.

  • popper — DOM-элемент самого тултипа.

  • state — объект состояния тултипа (visible, enabled и т.д.).

  • props — объект с настройками тултипа.

  • Методы управления:

    • show() — показать тултип.
    • hide() — скрыть тултип.
    • destroy() — удалить тултип полностью.
    • setProps(newProps) — изменить настройки после создания.

Пример использования instance внутри onCreate:

tippy('#myButton', {
  content: 'Пример',
  onCreate(instance) {
    if (!instance.props.interactive) {
      instance.setProps({ interactive: true });
    }
    instance.popper.style.border = '2px solid red';
  }
});

Здесь мы динамически делаем тултип интерактивным и добавляем красную рамку после его создания.

Различия onCreate и других хуков

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

  • onMount — вызывается при монтировании тултипа в DOM.
  • onShow — срабатывает перед отображением тултипа.
  • onShown — после появления тултипа.
  • onHide / onHidden — при скрытии тултипа.

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

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

  1. Динамическое добавление содержимого:
tippy('#dynamicButton', {
  onCreate(instance) {
    instance.setProps({
      content: `Сегодняшняя дата: ${new Date().toLocaleDateString()}`
    });
  }
});
  1. Добавление классов и стилей к тултипу:
tippy('#styledButton', {
  content: 'Стилизация',
  onCreate(instance) {
    instance.popper.classList.add('custom-tooltip');
    instance.popper.style.padding = '10px';
    instance.popper.style.backgroundColor = '#222';
    instance.popper.style.color = '#fff';
  }
});
  1. Логирование и отладка:
tippy('.logButton', {
  content: 'Логирование',
  onCreate(instance) {
    console.log('Создан тултип для элемента:', instance.reference);
  }
});

Советы и лучшие практики

  • onCreate полезен для единовременных операций, которые не зависят от показа тултипа.
  • Не рекомендуется выполнять тяжелые вычисления в onCreate, так как он выполняется сразу при инициализации.
  • Для динамических изменений перед показом лучше использовать onShow.
  • С помощью instance.setProps() можно безопасно модифицировать любые параметры тултипа после создания.

Поддержка интерактивного контента

Если тултип содержит кнопки, формы или другие интерактивные элементы, onCreate позволяет сразу включить интерактивность:

tippy('#interactiveButton', {
  content: '<button>Кликни меня</button>',
  allowHTML: true,
  interactive: false,
  onCreate(instance) {
    instance.setProps({ interactive: true });
  }
});

Совместное использование с delegate и массивами элементов

onCreate также поддерживается при делегировании и при инициализации тултипов на множестве элементов:

tippy('.tooltip', {
  content: 'Множественные тултипы',
  onCreate(instance) {
    console.log('Тултип создан для:', instance.reference);
  }
});

Каждый тултип получит отдельный вызов onCreate, что позволяет индивидуально настраивать элементы.

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

Оглавление