Программное создание якорей

В Tippy.js якорь — это элемент DOM, к которому привязывается всплывающая подсказка. Практически любой HTML-элемент может служить якорем: кнопка, ссылка, изображение или произвольный блок. Для создания якоря достаточно передать его в функцию tippy() в качестве первого аргумента.

tippy('#myButton', {
  content: 'Это подсказка',
});

Здесь #myButton — селектор якоря, а объект конфигурации определяет содержимое подсказки и её поведение.

Выбор элементов в качестве якорей

Tippy.js поддерживает несколько способов указания якорей:

  • CSS-селекторы: передаются строкой, как в примере выше. Позволяют автоматически привязать подсказку ко всем совпадающим элементам.
  • DOM-элементы: можно передавать объект HTMLElement напрямую:
const button = document.querySelector('#myButton');
tippy(button, { content: 'Подсказка через элемент' });
  • NodeList или массив элементов: позволяет создавать несколько подсказок за один вызов:
const buttons = document.querySelectorAll('.btn');
tippy(buttons, { content: 'Общая подсказка для всех кнопок' });

Динамическое создание якорей

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

const newButton = document.createElement('button');
newButton.textContent = 'Динамическая кнопка';
document.body.appendChild(newButton);

tippy(newButton, { content: 'Подсказка для динамической кнопки' });

Важно, что tippy() может быть вызвано в любой момент после появления элемента в DOM. Для коллекций элементов, созданных динамически, можно использовать делегирование через delegate:

tippy.delegate(document.body, {
  target: '.dynamic-btn',
  content: 'Подсказка через делегирование'
});

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

Каждому якорю Tippy.js присваивает объект-инстанс, который хранит все настройки подсказки и методы для управления её состоянием. Инстанс можно получить через вызов tippy() или через свойство ._tippy у элемента:

const instance = document.querySelector('#myButton')._tippy;
instance.show();  // открыть подсказку
instance.hide();  // закрыть подсказку
instance.setContent('Новое содержимое');  // изменить текст

Методы инстанса позволяют реализовать сложную логику отображения подсказок в зависимости от действий пользователя.

Создание якорей с уникальными свойствами

Каждый якорь может иметь индивидуальные настройки:

  • position — положение подсказки относительно якоря (top, bottom, left, right и их комбинации).
  • animation — тип анимации появления (fade, scale, shift-toward).
  • delay — задержка появления и скрытия подсказки.
  • interactive — возможность взаимодействия с содержимым подсказки (например, кликабельные ссылки или кнопки внутри).
tippy('#specialButton', {
  content: 'Интерактивная подсказка',
  placement: 'right',
  animation: 'scale',
  interactive: true,
  delay: [100, 300]
});

Использование этих параметров позволяет создавать якоря, полностью адаптированные под интерфейс и поведение пользователя.

Объединение якорей и событий

Для более гибкой логики можно управлять якорями через события DOM. Например, открывать подсказку только при определённом событии:

const button = document.querySelector('#eventButton');
const instance = tippy(button, { content: 'Событие click', trigger: 'manual' })[0];

button.addEventListener('click', () => {
  instance.show();
});

Использование trigger: 'manual' позволяет полностью контролировать момент показа и скрытия подсказки программно.

Массовое создание и удаление якорей

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

const buttons = document.querySelectorAll('.btn');
const instances = tippy(buttons, { content: 'Массовые подсказки' });

// удаление всех подсказок
instances.forEach(inst => inst.destroy());

Метод destroy() удаляет подсказку, очищает все события и освобождает ресурсы. Это важно для предотвращения утечек памяти при динамическом изменении DOM.

Делегирование для динамически добавленных якорей

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

tippy.delegate(document.body, {
  target: '.tooltip',
  content: (reference) => `Подсказка для ${reference.textContent}`,
  placement: 'bottom'
});

Здесь reference — текущий элемент, который вызвал подсказку. Функция content позволяет динамически формировать текст подсказки для каждого якоря.

Хранение и повторное использование якорей

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

const button = document.querySelector('#reuseButton');
const instance = tippy(button, { content: 'Многоразовая подсказка' })[0];

// повторное открытие и изменение
instance.setContent('Новое содержимое');
instance.show();

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

Оглавление