Работа с коллекциями экземпляров

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

Инициализация нескольких тултипов

Для создания коллекции используется метод tippy() с передачей NodeList, массива элементов или селектора CSS:

const buttons = document.querySelectorAll('.tooltip-btn');

const tooltips = tippy(buttons, {
  content: 'Информация о кнопке',
  placement: 'top',
  animation: 'fade',
});

В результате переменная tooltips содержит массив экземпляров Tippy.js. Каждый элемент коллекции — отдельный объект с полным набором методов (show(), hide(), setContent(), destroy() и др.).

Массовое управление экземплярами

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

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

tooltips.forEach(t => t.show()); // показать все тултипы
tooltips.forEach(t => t.hide()); // скрыть все тултипы

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

Изменение содержимого

Контент можно менять как индивидуально, так и для всех сразу:

tooltips.forEach(t => t.setContent('Новый текст подсказки'));

Обновление позиции

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

tooltips.forEach(t => t.popperInstance.update());

Метод update() пересчитывает координаты и гарантирует корректное позиционирование.

Использование делегирования для больших коллекций

Для больших списков элементов можно использовать делегирование, чтобы не создавать отдельный экземпляр для каждого элемента:

tippy.delegate(document.body, {
  target: '.tooltip-btn',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  placement: 'right',
});

Преимущества:

  • Экономия памяти: один экземпляр для всех элементов.
  • Поддержка динамически добавленных элементов.
  • Автоматическое удаление тултипов при удалении DOM-узлов.

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

Общие свойства

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

const tooltips = tippy('.tooltip-btn', {
  placement: 'bottom',
  delay: [100, 300],
  arrow: true,
  theme: 'light-border'
});
  • placement — позиция тултипа относительно элемента.
  • delay — задержка перед показом и скрытием.
  • arrow — отображение стрелки.
  • theme — кастомная тема, применяемая ко всем подсказкам.

Индивидуальные настройки

Каждый объект коллекции можно настраивать отдельно после создания:

tooltips[0].setProps({ placement: 'left', content: 'Особая подсказка' });

Удаление коллекции

Для полного удаления всех экземпляров коллекции используется метод destroy():

tooltips.forEach(t => t.destroy());

После вызова destroy() тултипы больше не реагируют на события и полностью освобождают ресурсы.

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

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

const newButtons = document.querySelectorAll('.new-tooltip-btn');
const newTooltips = tippy(newButtons, {
  content: 'Подсказка для новых кнопок'
});

tooltips.push(...newTooltips); // расширение существующей коллекции

Таким образом коллекция растет динамически, сохраняя удобство управления.

Итоги по коллекциям

  • tippy(NodeList|Array|Selector, options) создаёт коллекцию экземпляров.
  • Методы массива позволяют массово управлять тултипами (show, hide, setContent).
  • Делегирование подходит для больших и динамических списков.
  • Индивидуальная настройка каждого элемента коллекции сохраняется после массовой инициализации.
  • Методы destroy() и update() обеспечивают корректное управление ресурсами и позиционированием.

Коллекции Tippy.js позволяют эффективно масштабировать интерфейс с множеством подсказок, избегая повторного кода и снижая нагрузку на DOM.

Оглавление