Назначение singleton

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

Основная концепция

При обычной инициализации Tippy.js каждый элемент с подсказкой создаёт отдельный экземпляр Tippy. Это удобно для индивидуальных подсказок, но при множестве элементов это может:

  • замедлить работу страницы;
  • создать большое количество лишних DOM-узлов;
  • усложнить управление поведением всех подсказок одновременно.

Использование singleton позволяет объединить все подсказки в один объект, который управляет их показом и скрытием централизованно.

Создание singleton

Для создания singleton используется метод tippy.createSingleton():

import tippy from 'tippy.js';

// Создаём обычные тултипы
const tooltips = tippy('.btn', {
  content: 'Я подсказка!',
  delay: [100, 200],
  animation: 'scale'
});

// Создаём singleton
const singleton = tippy.createSingleton(tooltips, {
  delay: 100,
  moveTransition: 'transform 0.2s ease',
  theme: 'light'
});

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

  • tooltips — массив отдельных тултипов, объединяемых в singleton.
  • Параметры singleton переопределяют общие настройки отдельных тултипов, но при этом сохраняются индивидуальные свойства контента.
  • delay задаёт задержку появления/скрытия для всех тултипов через singleton.
  • moveTransition позволяет настроить плавность перемещения тултипа при переходе между элементами.
  • theme задаёт общую тему для всех объединённых подсказок.

Особенности работы

  1. Переключение между элементами: Singleton автоматически скрывает предыдущую подсказку и показывает новую при наведении на другой элемент. Это устраняет наложение нескольких тултипов.

  2. Общие анимации: Все подсказки в singleton используют одни и те же анимации, указанные при создании singleton, что обеспечивает визуальную консистентность.

  3. Общий контейнер DOM: Вместо создания отдельных DOM-узлов для каждого тултипа singleton создаёт один контейнер, который перемещается и обновляет содержимое по мере необходимости.

Настройка параметров singleton

1. Задержка показа и скрытия

const singleton = tippy.createSingleton(tooltips, {
  delay: [200, 500] // 200 мс до показа, 500 мс до скрытия
});
  • Массив [show, hide] задаёт раздельную задержку для появления и скрытия подсказки.

2. Анимация перемещения

const singleton = tippy.createSingleton(tooltips, {
  moveTransition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
});
  • Позволяет контролировать плавность перемещения подсказки при наведении на другой элемент.

3. Включение/отключение триггеров

const singleton = tippy.createSingleton(tooltips, {
  trigger: 'mouseenter focus'
});
  • Триггеры задаются на уровне singleton и применяются ко всем объединённым тултипам.
  • Можно использовать стандартные события: mouseenter, click, focus, manual.

Сценарии применения

  • Списки с большим количеством элементов: кнопки, иконки, элементы меню.
  • Таблицы с подсказками на каждой ячейке.
  • Карты и диаграммы с множеством интерактивных точек.

Использование singleton снижает нагрузку на страницу и упрощает поддержку интерфейса при динамическом добавлении элементов.

Важные советы

  • Не объединять слишком разные подсказки: singleton лучше подходит для подсказок с одинаковым стилем и поведением.
  • Сохранять уникальный контент: каждый тултип внутри singleton может иметь своё содержимое, но общие свойства, такие как анимация и задержка, наследуются от singleton.
  • Обновление элементов: при динамическом добавлении новых элементов можно создавать новые тултипы и добавлять их в существующий singleton через setSingletonInstances.

Методы singleton

  1. setInstances(instances) — заменяет текущие тултипы новыми.
  2. show() / hide() — управляет показом/скрытием активного тултипа.
  3. destroy() — удаляет singleton и освобождает DOM-ресурсы.

Пример:

singleton.show(); // показать текущий тултип
singleton.hide(); // скрыть
singleton.destroy(); // удалить singleton

Итоговое преимущество

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

Оглавление