Статические методы

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

tippy.setDefaultProps(props)

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

tippy.setDefaultProps({
  placement: 'right',
  theme: 'light',
  delay: [100, 200]
});

Ключевые моменты:

  • placement — позиционирование тултипа относительно целевого элемента (top, bottom, left, right и их комбинации с -start или -end).
  • theme — стилизация тултипа, можно использовать встроенные темы или собственные классы CSS.
  • delay — задержка показа и скрытия в миллисекундах, может быть числом или массивом [show, hide].

После вызова setDefaultProps все последующие вызовы tippy(target, options) будут учитывать эти настройки как базовые.

tippy.hideAll(options)

Статический метод hideAll скрывает все активные тултипы на странице. Позволяет управлять состоянием интерфейса централизованно.

tippy.hideAll({ duration: 300, exclude: someTippyInstance });

Опции метода:

  • duration — анимация скрытия в миллисекундах.
  • exclude — исключает указанный тултип из скрытия. Принимает инстанцию Tippy.js.
  • delay — можно задать дополнительную задержку перед скрытием.

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

tippy.disableAll() и tippy.enableAll()

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

tippy.disableAll();
tippy.enableAll();

Особенности:

  • disableAll() — блокирует все тултипы, создавая эффект «неактивности». Тултипы не будут показываться при наведении.
  • enableAll() — восстанавливает интерактивность, тултипы снова реагируют на события.
  • Подходит для глобального режима, когда требуется временно заблокировать все всплывающие подсказки, например, во время модальных окон или загрузки данных.

tippy.destroyAll()

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

tippy.destroyAll();

Особенности применения:

  • Полезно при динамической загрузке контента, когда тултипы связаны с DOM-элементами, которые могут быть удалены.
  • После вызова destroyAll нельзя повторно использовать старые инстанции, нужно создавать новые через tippy().

tippy.createSingleton(tippies, options)

Позволяет объединить несколько тултипов в единую «синглтон»-инстанцию, которая управляет показом одной подсказки для разных элементов.

const buttons = document.querySelectorAll('.btn');
const instances = tippy(buttons, { content: 'Пример' });

const singleton = tippy.createSingleton(instances, {
  delay: 100,
  moveTransition: 'transform 0.2s ease-out'
});

Преимущества:

  • Экономит ресурсы, создавая одну визуальную подсказку для нескольких элементов.
  • Позволяет управлять общими свойствами и анимацией.
  • Поддерживает индивидуальные опции контента для каждого элемента.

tippy.currentInput

Статическое свойство, которое хранит текущий элемент, над которым находится курсор, если используется интерактивное поведение.

document.addEventListener('mousemove', () => {
  console.log(tippy.currentInput); // элемент, над которым тултип активен
});

Особенности:

  • Полезно для сложной логики управления интерфейсом.
  • Используется реже, но позволяет интегрировать тултипы с кастомными событиями.

Статические методы для управления контентом

Хотя основная работа с контентом тултипа происходит через опции content при создании инстанции, статические методы позволяют:

  • Массово скрывать (hideAll), показывать (enableAll) или уничтожать (destroyAll) тултипы.
  • Настраивать глобальные свойства, влияющие на все будущие тултипы (setDefaultProps).
  • Создавать единый визуальный объект для нескольких элементов (createSingleton).

Эта архитектура обеспечивает масштабируемость и контроль над тултипами на уровне приложения, что критично при работе с динамическими интерфейсами.

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

Оглавление