Управление количеством экземпляров

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

Создание и хранение экземпляров

Каждый вызов функции tippy() возвращает массив экземпляров (instances), соответствующих выбранным элементам:

const buttons = document.querySelectorAll('.btn');
const tippyInstances = tippy(buttons, {
  content: 'Подсказка',
  placement: 'top'
});

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

  • tippyInstances — это массив объектов Tippy, каждый из которых содержит методы управления тултипом (show(), hide(), destroy(), setContent() и другие).
  • Для динамически добавленных элементов нужно создавать новые экземпляры, иначе тултипы не будут работать на новых DOM-элементах.

Ограничение количества одновременно открытых тултипов

По умолчанию все тултипы на странице могут быть открыты одновременно. Чтобы ограничить число активных подсказок, используют опцию singleton или вручную управляют событиями onShow/onHide.

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

const tooltips = tippy('.btn', {
  content: 'Подсказка',
  placement: 'bottom'
});

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

Особенности createSingleton:

  • Только один тултип из группы будет видим в момент времени.
  • Можно задать delay и анимацию для всей группы.
  • Экономит ресурсы при большом числе элементов.

Управление экземплярами вручную

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

const instances = tippy('.btn', {
  content: 'Подсказка',
  trigger: 'click',
  onShow(instance) {
    instances.forEach(i => {
      if (i !== instance) i.hide();
    });
  }
});

Пояснения:

  • Метод onShow позволяет скрывать все тултипы кроме текущего.
  • Это решение работает без singleton и подходит для динамически изменяемых наборов элементов.
  • Поддерживает разные триггеры (click, mouseenter, focus).

Уничтожение экземпляров

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

instances.forEach(instance => instance.destroy());

Важно:

  • destroy() удаляет тултип из DOM и отключает все слушатели событий.
  • После destroy() объект экземпляра больше не работает.
  • Для динамических интерфейсов полезно хранить экземпляры в массиве, чтобы затем массово очищать.

Динамическое создание и удаление

При работе с элементами, добавленными через JS, создаются новые экземпляры:

const container = document.getElementById('container');

container.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.textContent = 'Новая кнопка';
  container.appendChild(newButton);
  
  const newTippy = tippy(newButton, { content: 'Новая подсказка' });
});

Рекомендации:

  • Для группы элементов можно поддерживать массив экземпляров и при добавлении нового элемента добавлять в этот массив.
  • Для массового удаления тултипов использовать destroy() на всех экземплярах массива.

Ленивая инициализация экземпляров

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

document.querySelectorAll('.btn').forEach(button => {
  let instance = null;

  button.addEventListener('mouseenter', () => {
    if (!instance) {
      instance = tippy(button, { content: 'Подсказка' });
      instance.show();
    }
  });
});

Плюсы ленивой инициализации:

  • Экземпляр создается только при первом взаимодействии.
  • Снижает нагрузку на страницу при большом количестве элементов.

Итоговая стратегия управления количеством экземпляров

  1. Статические группы: использовать createSingleton.
  2. Динамические элементы: хранить экземпляры в массиве и управлять через события.
  3. Оптимизация производительности: уничтожать ненужные экземпляры и применять ленивую инициализацию.
  4. Ограничение видимых тултипов: либо через singleton, либо через onShow/onHide.

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

Оглавление