Конфигурация singleton

В Tippy.js singleton представляет собой способ объединения нескольких всплывающих подсказок в один общий объект, который управляет их поведением централизованно. Это особенно полезно, когда на странице присутствует множество элементов с тултипами, и требуется согласованная настройка анимации, задержек или событий открытия/закрытия.

Инициализация Singleton

Для создания singleton используется функция tippy.createSingleton, которая принимает два основных параметра:

  1. Массив экземпляров Tippy — коллекция отдельных тултипов, которые должны быть объединены.
  2. Объект конфигурации singleton — настройки поведения, общие для всех элементов.
const tooltips = tippy('.btn', {
  content: 'Пример подсказки',
  animation: 'fade'
});

const singleton = tippy.createSingleton(tooltips, {
  delay: [100, 200],
  moveTransition: 'transform 0.3s ease',
});

В этом примере tooltips создаёт набор индивидуальных тултипов для всех элементов с классом .btn, а singleton объединяет их с едиными задержками и переходами.

Основные параметры конфигурации

1. delay Задаёт задержку открытия и закрытия для всех тултипов singleton. Может быть числом или массивом [открытие, закрытие].

delay: [200, 400] // 200ms на открытие, 400ms на закрытие

2. moveTransition Определяет CSS-переход для анимации перемещения тултипа при смене цели:

moveTransition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)'

3. theme Позволяет задать единый визуальный стиль для всех тултипов singleton:

theme: 'light'

4. placement Определяет позицию всех тултипов относительно целевого элемента:

placement: 'bottom'

5. trigger Определяет событие, при котором будет показываться тултип. Например, click, mouseenter, focus:

trigger: 'mouseenter focus'

6. interactive Позволяет делать тултип интерактивным (например, для всплывающих меню или форм внутри тултипа):

interactive: true

Динамическая смена контента

Singleton позволяет управлять контентом каждого тултипа индивидуально через параметр onShow или onTrigger:

const singleton = tippy.createSingleton(tooltips, {
  onTrigger(instance) {
    const target = instance.reference;
    instance.setContent(`Подсказка для ${target.textContent}`);
  }
});

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

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

1. show() и hide() Позволяют программно показывать или скрывать тултипы:

singleton.show(); // Показать активный тултип
singleton.hide(); // Скрыть активный тултип

2. setProps(props) Обновление конфигурации singleton после инициализации:

singleton.setProps({
  delay: [0, 100],
  placement: 'top'
});

3. clearDelay() Сбрасывает текущие задержки открытия и закрытия.

singleton.clearDelay();

4. destroy() Удаляет singleton и восстанавливает обычные тултипы:

singleton.destroy();

Особенности использования

  • Singleton не копирует настройки отдельных тултипов, а лишь управляет ими централизованно.
  • Каждое изменение через setProps применяется ко всем тултипам одновременно.
  • Можно объединять тултипы с разными исходными конфигурациями, но при этом приоритет имеет конфигурация singleton.
  • Поддерживается интерактивное поведение, что делает singleton удобным для сложных пользовательских интерфейсов, где требуется удержание подсказок при наведении или клике.

Практические советы

  1. Для страниц с большим количеством элементов с подсказками singleton снижает нагрузку на браузер, объединяя события открытия/закрытия.
  2. Использовать moveTransition позволяет избежать резкого скачка тултипа при смене целевого элемента.
  3. Для динамического контента сочетание onTrigger и setContent делает singleton максимально гибким.
  4. Если тултип содержит интерактивные элементы, обязательно включать interactive: true, иначе клики по внутренним элементам будут закрывать подсказку.

Пример комплексного применения

const buttons = document.querySelectorAll('.action-btn');
const tips = tippy(buttons, {
  content: 'Нажмите для действия',
  animation: 'scale',
  theme: 'dark'
});

const singleton = tippy.createSingleton(tips, {
  delay: [100, 300],
  moveTransition: 'transform 0.25s ease-out',
  placement: 'top',
  interactive: true,
  onTrigger(instance) {
    instance.setContent(`Действие для ${instance.reference.dataset.name}`);
  }
});

В этом примере singleton объединяет все кнопки с классом .action-btn, централизует анимацию, задержки и позиционирование, при этом контент каждой подсказки формируется динамически.

Оглавление