Создание singleton группы

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

Основные принципы работы

  • Единый контроль видимости: когда один тултип из группы становится видимым, все остальные автоматически скрываются.
  • Общий набор опций: параметры singleton-а задаются при его создании, что позволяет единообразно стилизовать и конфигурировать всю группу.
  • Совместимость с любыми элементами: singleton работает с любыми селекторами или экземплярами Tippy.

Создание singleton

Для начала необходимо создать отдельные тултипы:

import tippy, { createSingleton } from 'tippy.js';

const tooltips = tippy('.tooltip', {
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  animation: 'scale',
  theme: 'light',
  duration: [300, 250]
});

Здесь создаются тултипы для всех элементов с классом .tooltip. Каждому тултипу назначается контент из атрибута data-tooltip, а также анимация и тема.

После создания обычных тултипов можно объединить их в singleton:

const singletonTooltip = createSingleton(tooltips, {
  delay: 100,
  moveTransition: 'transform 0.2s ease-out',
  theme: 'light-border'
});
  • tooltips — массив экземпляров Tippy.
  • delay — задержка появления и скрытия тултипа.
  • moveTransition — CSS-анимация перемещения тултипа.
  • theme — общая тема для всей группы.

Настройка поведения singleton

Параметры singleton-а позволяют гибко управлять всей группой:

  1. delay – массив [появление, скрытие] или число. Позволяет синхронизировать скорость показа и скрытия всех тултипов.
  2. placement – позиционирование тултипа относительно целевого элемента. Можно переопределять для всей группы.
  3. animation – общая анимация появления (fade, scale, shift-away и др.).
  4. interactive – включает возможность взаимодействия с тултипом (например, клики на кнопки внутри тултипа).
  5. moveTransition – определяет плавность перемещения при смене активного элемента группы.
const singletonTooltip = createSingleton(tooltips, {
  delay: [200, 150],
  placement: 'top',
  animation: 'shift-away',
  interactive: true,
  theme: 'dark'
});

Динамическое обновление содержимого

Даже после создания singleton можно изменять содержимое отдельных тултипов:

tooltips[0].setContent('Новый контент для первого элемента');
singletonTooltip.setProps({ moveTransition: 'transform 0.3s ease-in-out' });
  • setContent обновляет текст конкретного тултипа.
  • setProps изменяет параметры всего singleton-а.

События singleton

Singleton поддерживает события, идентичные обычным тултипам:

  • onShow(instance) – вызывается при появлении тултипа.
  • onHide(instance) – вызывается при скрытии тултипа.
  • onTrigger(instance) – срабатывает при активации элемента.
singletonTooltip.setProps({
  onShow(instance) {
    console.log('Показывается тултип для', instance.reference);
  },
  onHide(instance) {
    console.log('Скрывается тултип для', instance.reference);
  }
});

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

Поддержка динамически добавленных элементов

Если на страницу добавляются новые элементы, можно:

  1. Создать отдельный Tippy для нового элемента.
  2. Добавить его в singleton с помощью метода setInstances:
const newTooltip = tippy('#new-element', { content: 'Новый элемент' });
singletonTooltip.setInstances([...tooltips, newTooltip]);

Теперь новый элемент автоматически управляется как часть singleton-а.

Рекомендации по использованию

  • Использовать singleton для групп однотипных элементов, например, кнопок с подсказками.
  • Применять interactive: true, если внутри тултипа есть кликабельные элементы.
  • Настраивать moveTransition для плавного перемещения тултипа между элементами.
  • Использовать события для логирования или кастомной анимации при показе и скрытии.

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

Оглавление