Конфигурация на основе данных

Tippy.js предоставляет гибкий механизм создания всплывающих подсказок, который позволяет конфигурировать поведение тултипов напрямую через HTML-атрибуты. Такой подход называют конфигурацией на основе данных (data attributes). Он особенно удобен для проектов, где требуется быстро подключать тултипы к множеству элементов без необходимости писать отдельный JavaScript-код для каждого из них.

Использование data-tippy-content

Главный атрибут для конфигурации контента тултипа — data-tippy-content. Его значение автоматически передается в Tippy.js как текст подсказки.

<button data-tippy-content="Сохранить изменения">Сохранить</button>

Вызов Tippy.js:

tippy('[data-tippy-content]');

В этом примере все элементы с атрибутом data-tippy-content получают тултип с указанным текстом. Такой способ позволяет управлять контентом полностью через разметку, без необходимости ручного создания экземпляров Tippy.

Настройка поведения через атрибуты

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

Атрибут Значение Описание
data-tippy-placement top, bottom, left, right Позиция тултипа относительно элемента
data-tippy-arrow true / false Отображение стрелки
data-tippy-theme строка Применение темы к тултипу
data-tippy-animation shift-away, fade, scale Анимация появления
data-tippy-delay число или массив [show, hide] Задержка показа и скрытия тултипа в миллисекундах

Пример:

<button 
    data-tippy-content="Удалить элемент"
    data-tippy-placement="right"
    data-tippy-arrow="true"
    data-tippy-theme="light"
    data-tippy-delay="[100, 300]"
>
    Удалить
</button>

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

tippy('[data-tippy-content]');

Все атрибуты автоматически конвертируются Tippy.js в соответствующие опции тултипа.

Пользовательские атрибуты для сложных случаев

Для более сложных сценариев можно использовать кастомные атрибуты и функцию tippy() с обработчиком getAttribute.

Пример динамической конфигурации:

<button 
    data-tooltip="Динамический контент" 
    data-tooltip-theme="dark"
    data-tooltip-delay="200"
>
    Динамика
</button>
tippy('[data-tooltip]', {
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  theme(reference) {
    return reference.getAttribute('data-tooltip-theme') || 'default';
  },
  delay(reference) {
    const delay = reference.getAttribute('data-tooltip-delay');
    return delay ? parseInt(delay) : 0;
  }
});

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

Поддержка сложного контента

Через data-tippy-content можно передавать не только текст, но и HTML-контент, если включить опцию allowHTML.

<button data-tippy-content="<strong>Важная подсказка!</strong>">Наведи</button>
tippy('[data-tippy-content]', {
  allowHTML: true,
});

Tippy.js корректно отрисует HTML внутри тултипа, сохраняя все атрибуты безопасности и предотвращая XSS через встроенную защиту.

Динамическое обновление контента

С помощью метода .setContent() можно изменять содержимое тултипа, даже если он был инициализирован через data-атрибут:

const btn = document.querySelector('button[data-tippy-content]');
const tipInstance = tippy(btn)[0];

tipInstance.setContent('Обновлённый контент');

Таким образом, комбинация data-атрибутов и API Tippy.js обеспечивает гибкость и удобство при работе с динамическими интерфейсами.

Резюме по data-атрибутам

  • data-tippy-content — основной контент тултипа.
  • data-tippy-* — стандартные опции для управления поведением и стилем.
  • Кастомные атрибуты позволяют строить сложные, динамически изменяемые тултипы.
  • Совмещение с allowHTML и методами API даёт полный контроль над содержимым и анимацией.

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

Оглавление