Инициализация на множестве элементов

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

Выбор элементов

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

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

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

Базовая инициализация

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

tippy(buttons, {
  content: 'Это подсказка',
  placement: 'top',
  animation: 'fade',
});

Ключевые параметры:

  • content — текст или HTML-содержимое подсказки. Может быть строкой или функцией, возвращающей строку.
  • placement — положение всплывающего элемента относительно целевого (top, bottom, left, right и их варианты -start, -end).
  • animation — тип анимации появления (fade, scale, shift-away, shift-toward).

При такой инициализации Tippy.js автоматически создаёт отдельный экземпляр для каждого элемента NodeList.

Индивидуальные настройки для каждого элемента

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

tippy(buttons, {
  content(reference) {
    return `Подсказка для ${reference.textContent}`;
  },
  placement: 'bottom',
});

Здесь reference — это текущий DOM-элемент, на который навешивается подсказка. Такой подход позволяет динамически менять содержимое без необходимости создавать отдельные вызовы tippy для каждого элемента.

Использование data-атрибутов

Для ещё более гибкой настройки удобно использовать data-* атрибуты в HTML:

<button class="tooltip-button" data-tippy-content="Подсказка 1">Кнопка 1</button>
<button class="tooltip-button" data-tippy-content="Подсказка 2">Кнопка 2</button>

Инициализация:

tippy('.tooltip-button');

Если не передавать опцию content, Tippy.js автоматически считывает значение data-tippy-content. Это позволяет быстро добавлять подсказки прямо через HTML без изменения JavaScript-кода.

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

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

const tooltips = tippy('.tooltip-button', {
  placement: 'right',
});

tooltips.forEach(instance => {
  instance.setContent('Новая подсказка');
});

Метод setContent позволяет динамически изменять содержимое, а другие методы, такие как show(), hide() и destroy(), дают полный контроль над каждым экземпляром.

Продвинутая инициализация с делегированием

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

tippy(document.body, {
  target: '.dynamic-tooltip',
  content: 'Подсказка для динамического элемента',
  placement: 'top',
  animation: 'scale',
});

В этом случае Tippy.js будет отслеживать появление элементов с классом .dynamic-tooltip и автоматически навешивать на них всплывающие подсказки. Такой подход уменьшает нагрузку на DOM и упрощает работу с элементами, создаваемыми через JavaScript или AJAX.

Настройка общих и специфических опций

Tippy.js поддерживает глобальные опции через tippy.setDefaults():

tippy.setDefaults({
  animation: 'scale',
  arrow: true,
  delay: [100, 200],
});

После этого при инициализации на множестве элементов можно не повторять эти параметры:

tippy('.tooltip-button', {
  content: 'Подсказка',
});

Если необходимо изменить настройки для конкретного элемента, это легко сделать через индивидуальный объект конфигурации.

Практические рекомендации

  • Для большого количества элементов стоит использовать селекторы классов, чтобы избежать множественных вызовов tippy.
  • Использование data-tippy-content упрощает поддержку и локализацию подсказок.
  • Делегирование особенно полезно для списков и таблиц, где элементы создаются динамически.
  • Сохранение экземпляров в массив позволяет централизованно управлять подсказками, обновлять их содержимое и настраивать поведение при взаимодействии с пользователем.

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

Оглавление