Утилиты и хелперы

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

Создание тултипов на лету

Функция tippy() принимает селектор, элемент или NodeList и объект опций. Хелперы упрощают динамическое создание и управление множеством тултипов.

import tippy from 'tippy.js';

tippy('.btn', {
  content: 'Нажмите для действия',
  placement: 'right',
  animation: 'scale',
});

Ключевые возможности:

  • Массовое создание: передача NodeList или CSS-селектора создаёт тултипы для всех элементов сразу.
  • Динамический контент: можно передавать функцию вместо строки для content, что позволяет подставлять актуальные данные при наведении.
tippy('.dynamic', {
  content: (reference) => `Вы навели на элемент #${reference.id}`,
});

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

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

  • show() и hide() – явно показать или скрыть тултип.
  • setContent(newContent) – динамически изменить содержимое.
  • destroy() – полностью удалить тултип и очистить события.
const tip = tippy('#example', { content: 'Пример' });
tip.show();
tip.setContent('Новый текст');
tip.hide();
tip.destroy();

Хелперы для позиционирования и интерактивности

Tippy.js интегрируется с Popper.js, предоставляя хелперы для управления позицией:

  • placement – определяет направление тултипа (top, bottom, left, right, с вариантами -start и -end).
  • flip – автоматически меняет позицию при нехватке места.
  • offset – смещение относительно элемента, принимает массив [skidding, distance].
tippy('#tooltip', {
  content: 'Смещение и переворот',
  placement: 'top-start',
  offset: [0, 10],
  flip: true,
});

Интерактивность: Для тултипов, содержащих кнопки или формы, устанавливается interactive: true, чтобы они не закрывались при наведении курсора.

tippy('#interactive', {
  content: 'Кликни на кнопку внутри',
  interactive: true,
});

Плагины и утилиты Tippy.js

Tippy.js поддерживает плагины для расширения функционала:

  • FollowCursor – тултип следует за курсором.
  • Sticky – удерживает тултип на элементе при прокрутке.
  • AnimateFill – анимация заполнения тултипа.

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

import { followCursor } from 'tippy.js';

tippy('.cursor', {
  content: 'Следует за курсором',
  plugins: [followCursor],
  followCursor: true,
});

События тултипов

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

  • onShow(instance) – перед показом тултипа.
  • onHide(instance) – перед скрытием.
  • onMount(instance) – когда тултип добавлен в DOM.
  • onUntrigger(instance) – при снятии триггера.
tippy('#eventExample', {
  content: 'События тултипа',
  onShow: (instance) => console.log('Показан:', instance),
  onHide: (instance) => console.log('Скрыт:', instance),
});

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

Доступ к внутренним инструментам Popper.js

Tippy.js предоставляет доступ к Popper.js через popperInstance:

const tip = tippy('#popperExample', { content: 'Пример' });
console.log(tip.popperInstance); // Доступ к Popper API

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

Утилиты для массового управления

Для комплексных интерфейсов полезны функции tippy.hideAll() и tippy.destroyAll():

// Скрыть все тултипы на странице
tippy.hideAll();

// Удалить все тултипы и очистить события
tippy.destroyAll();

Эти хелперы упрощают работу с множественными динамическими подсказками, особенно при переходах между страницами или изменении DOM.

Создание кастомных шаблонов

Tippy.js позволяет использовать HTML-шаблоны для тултипов через allowHTML: true:

tippy('#custom', {
  content: '<strong>Жирный текст</strong> с кнопкой <button>OK</button>',
  allowHTML: true,
  interactive: true,
});

Это открывает возможности для интеграции тултипов с компонентами интерфейса, формами и даже мини-виджетами внутри подсказок.

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

Оглавление