Программное управление группами

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

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

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

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

const tooltips = tippy('.tooltip', {
  content: 'Пример подсказки',
  animation: 'scale',
  delay: [100, 200],
});

const singleton = createSingleton(tooltips, {
  delay: 0,
  moveTransition: 'transform 0.2s ease-out',
});

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

  • tippy('.tooltip', {...}) создаёт массив экземпляров для каждого элемента с классом .tooltip.
  • createSingleton(tooltips, options) объединяет их в одну группу.
  • Опция delay в createSingleton задаёт задержку для всей группы, переопределяя индивидуальные настройки.

Синхронизация открытия и закрытия

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

singleton.show(); // открывает текущий активный тултип
singleton.hide(); // скрывает все тултипы группы
singleton.setProps({ animation: 'fade' }); // меняет свойства для всех тултипов в группе

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

Настройка поведения группы

Tippy.js позволяет задавать поведение группы через опции при создании singleton:

  • delay – массив [showDelay, hideDelay] для всех тултипов.
  • moveTransition – задаёт CSS-переход при движении тултипа.
  • placement – позволяет синхронизировать расположение подсказок для всей группы.
  • allowHTML – включает поддержку HTML-контента в подсказках.

Пример настройки с различными эффектами:

const singleton = createSingleton(tooltips, {
  delay: [50, 300],
  moveTransition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
  placement: 'bottom',
  allowHTML: true,
});

Динамическое добавление и удаление элементов

Группу можно расширять и изменять динамически. Для этого необходимо создать новые экземпляры Tippy и обновить singleton:

const newTooltip = tippy('#newElement', { content: 'Новая подсказка' });
singleton.setInstances([...singleton.getInstances(), newTooltip]);

Удаление происходит аналогично:

const instances = singleton.getInstances().filter(t => t.reference.id !== 'oldElement');
singleton.setInstances(instances);

Примечание: getInstances() возвращает массив всех тултипов внутри singleton, что облегчает контроль над их состоянием.

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

Singleton позволяет подписываться на события всех тултипов группы через стандартные Tippy-хуки:

singleton.state.currentTarget.addEventListener('mouseenter', () => {
  console.log('Активный тултип наведён');
});

singleton.setProps({
  onShow(instance) {
    console.log(`Открыт тултип для элемента: ${instance.reference.id}`);
  },
  onHide(instance) {
    console.log(`Скрыт тултип для элемента: ${instance.reference.id}`);
  }
});

Таким образом, можно обрабатывать события централизованно, не создавая отдельные обработчики для каждого элемента.

Использование с React и Vue

Tippy.js интегрируется с фреймворками через официальные обёртки:

  • Для React используется @tippyjs/react, где singleton создаётся через useSingleton:
import { useSingleton, Tooltip } from '@tippyjs/react';

const [source, target] = useSingleton({ delay: 100 });

<Tooltip content="Подсказка" singleton={source}>
  <button>Кнопка 1</button>
</Tooltip>

<Tooltip content="Другая подсказка" singleton={source}>
  <button>Кнопка 2</button>
</Tooltip>
  • Для Vue применяется директива v-tippy с аналогичной логикой создания singleton через createSingleton.

Полезные советы

  • Не создавать лишние singleton — один singleton на логически связанную группу элементов снижает нагрузку на DOM.
  • Динамически обновлять экземпляры — удобно для списков с динамическими элементами (например, таблицы или меню).
  • Использовать moveTransition — позволяет плавно анимировать перемещения тултипов при изменении позиции элементов.
  • Синхронизация delay и animation — обеспечивает единый визуальный стиль и предсказуемое поведение группы.

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

Оглавление