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

Для начала работы с Tippy.js необходимо создать экземпляр подсказки, связав его с конкретным элементом DOM. Основной синтаксис выглядит следующим образом:

tippy(target, options);
  • target — элемент DOM или селектор, к которому привязывается тултип. Можно передавать один элемент, NodeList или CSS-селектор.
  • options — объект конфигурации, задающий поведение, стиль и функциональность подсказки.

Пример создания базового тултипа:

tippy('#button', {
  content: 'Пример подсказки'
});

В этом случае подсказка с текстом Пример подсказки появится при наведении на элемент с id button.

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

После создания тултипа можно управлять его поведением через свойства экземпляра. Каждый вызов tippy() возвращает экземпляр или массив экземпляров, если элементов несколько. Основные свойства:

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

    const tip = tippy('#button', { content: 'Пример' });
console.log(tip[0].reference); // <button id="button">...</button>

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

  • popperInstance — экземпляр Popper.js, предоставляющий методы для обновления позиции, например:

    tip[0].popperInstance.update();

  • props — объект с текущими настройками тултипа. Содержит все параметры, переданные при инициализации, а также значения по умолчанию для неуказанных опций.

    console.log(tip[0].props.content); // 'Пример'

  • state — объект, отражающий текущее состояние тултипа:

    • isVisible — true, если тултип видим
    • isEnabled — true, если тултип активен
    • isMounted — true, если тултип смонтирован в DOM

Методы экземпляра

Tippy.js предоставляет богатый набор методов для управления тултипами:

  • show() — отображает тултип.

    tip[0].show();

  • hide() — скрывает тултип.

    tip[0].hide();

  • enable() / disable() — включает или отключает тултип.

    tip[0].disable();
tip[0].enable();

  • setProps(newProps) — динамически изменяет свойства тултипа после создания. Очень удобно для изменения текста или поведения без пересоздания экземпляра.

    tip[0].setProps({
  content: 'Новый текст'
});

  • destroy() — полностью удаляет тултип, очищая DOM и освобождая ресурсы. Используется при удалении элемента или необходимости пересоздания тултипа с нуля.

    tip[0].destroy();

Взаимодействие со состоянием тултипа

Экземпляры позволяют следить за текущим состоянием через свойство state. Примеры:

const instance = tippy('#button', { content: 'Тултип' })[0];

if (!instance.state.isVisible) {
  instance.show();
}

instance.state.isEnabled = false; // временно отключает тултип

Состояние isMounted полезно при анимации или работе с динамическими DOM-элементами, чтобы убедиться, что тултип смонтирован перед изменением контента.

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

Каждый экземпляр поддерживает подписку на события через опции:

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

Пример:

tippy('#button', {
  content: 'Подсказка',
  onShow(instance) {
    console.log('Тултип собирается показаться', instance.reference);
  }
});

Доступ к тултипу из DOM

Можно получить экземпляр тултипа, связанный с элементом, используя статический метод tippy.getInstance(element):

const button = document.querySelector('#button');
const tipInstance = tippy.getInstance(button);
tipInstance.show();

Это особенно полезно, когда экземпляр создавался заранее, но ссылки на него нет в коде.

Работа с массивом экземпляров

Если tippy() применялся к NodeList или селектору, возвращается массив экземпляров. Управлять ими можно через перебор:

const tips = tippy('.buttons', { content: 'Кнопка' });
tips.forEach(instance => {
  instance.setProps({ animation: 'scale' });
});

Такой подход позволяет централизованно менять поведение нескольких тултипов.

Ключевые рекомендации

  • Использовать setProps вместо пересоздания экземпляра при изменении контента или конфигурации.
  • Проверять state.isMounted перед динамическим изменением DOM тултипа.
  • Подписываться на события экземпляра для логики показа/скрытия, особенно если анимации или асинхронные данные.
  • Для нескольких элементов всегда работать через массив экземпляров или метод getInstance, чтобы не терять ссылки на тултипы.

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

Оглавление