Инспектирование экземпляров

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

Инициализация экземпляра

Экземпляр создается с помощью функции tippy(). Она возвращает объект, содержащий методы и свойства тултипа:

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

const instance = tippy(button, {
  content: 'Привет, я тултип!',
  placement: 'right',
  trigger: 'mouseenter focus',
});

Ключевой момент: instance — это коллекция экземпляров, даже если привязан к одному элементу. Чтобы получить прямой доступ к конкретному экземпляру, используют instance[0].

Основные методы экземпляра

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

  • show() — показывает тултип.
  • hide() — скрывает тултип.
  • toggle() — переключает состояние тултипа.
  • setContent(newContent) — изменяет содержимое тултипа в рантайме.
  • destroy() — полностью удаляет тултип и очищает все слушатели событий.
  • enable() / disable() — включает или отключает тултип без удаления.
  • unmount() / mount() — управляют добавлением/удалением тултипа из DOM без уничтожения экземпляра.

Пример динамического управления:

const myTooltip = instance[0];

myTooltip.show();

setTimeout(() => {
  myTooltip.setContent('Новое содержимое');
}, 2000);

Свойства экземпляра

Экземпляр содержит важные свойства, которые позволяют инспектировать его текущее состояние:

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

  • state — объект с внутренними состояниями тултипа:

    • isVisible — видим ли тултип.
    • isMounted — смонтирован ли тултип в DOM.
    • isShown — отображается ли тултип пользователю (учитывает анимацию).

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

  • popper — объект Popper.js, используемый для позиционирования.

Пример инспекции:

console.log(myTooltip.props.content); // 'Привет, я тултип!'
console.log(myTooltip.state.isVisible); // false

Доступ к DOM-элементу тултипа

Tippy.js создает контейнер для тултипа в DOM, доступный через свойство popper экземпляра:

const tooltipNode = myTooltip.popper;
tooltipNode.style.backgroundColor = 'lightblue';

Для более точного контроля можно использовать:

  • myTooltip.popperChildren.tooltip — сам элемент тултипа.
  • myTooltip.popperChildren.arrow — стрелка тултипа (если включена).

Инспекция и обновление props

Экземпляр позволяет динамически изменять параметры без пересоздания:

myTooltip.setProps({
  placement: 'bottom',
  animation: 'fade',
});

Можно использовать setProps для изменения любых настроек тултипа: задержек, интерактивности, тем и контента. Это особенно полезно для интерфейсов с динамическим контентом.

События экземпляра

Экземпляры поддерживают собственные события:

  • onShow(instance) — вызывается перед показом тултипа.
  • onShown(instance) — после полной анимации показа.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия тултипа.
  • onMount(instance) / onUnmount(instance) — управление монтированием тултипа в DOM.

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

myTooltip.setProps({
  onShow(instance) {
    console.log('Тултип показывается', instance.state.isVisible);
  },
  onHidden(instance) {
    console.log('Тултип скрыт', instance.state.isVisible);
  },
});

Доступ к нескольким экземплярам

Если один селектор привязан к нескольким элементам, tippy() возвращает массив экземпляров:

const buttons = document.querySelectorAll('.btn');
const tooltips = tippy(buttons, { content: 'Кнопка' });

tooltips.forEach(t => {
  console.log(t.state.isVisible);
});

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

Взаимодействие с Popper.js

Экземпляр содержит объект popper, через который можно управлять позицией тултипа вручную:

myTooltip.popperInstance.update(); // пересчитывает позицию
myTooltip.popperInstance.setOptions({
  modifiers: [{ name: 'offset', options: { offset: [0, 20] } }]
});

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

Резюме ключевых моментов

  • Экземпляр — это основной инструмент управления тултипом.
  • Все свойства и методы доступны через instance[0] для одного элемента.
  • Динамическое изменение props и content позволяет адаптировать тултип под любые условия.
  • Свойство state обеспечивает полное понимание текущего состояния тултипа.
  • Поддержка событий позволяет интегрировать тултипы в сложные пользовательские интерфейсы.

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

Оглавление