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

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

Создание шаблона через HTML

Самый простой способ использовать шаблон — это подготовить HTML-элемент, который будет служить содержимым подсказки. Обычно это <div> с уникальным идентификатором:

<div id="tooltip-template" style="display: none;">
  <h3>Заголовок подсказки</h3>
  <p>Описание или дополнительная информация.</p>
  <button class="tooltip-action">Действие</button>
</div>

<button id="my-button">Наведи на меня</button>

Подключение шаблона к Tippy.js производится с помощью опции content и функции document.querySelector:

tippy('#my-button', {
  content: document.querySelector('#tooltip-template').innerHTML,
  allowHTML: true,
  interactive: true,
  placement: 'right'
});

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

  • allowHTML: true — разрешает интерпретацию HTML внутри подсказки.
  • interactive: true — позволяет взаимодействовать с элементами внутри подсказки, например, нажимать кнопки или выделять текст.
  • placement — определяет позицию всплывающей подсказки относительно элемента.

Использование функции-шаблона

Для динамического создания содержимого можно передавать функцию в опцию content. Функция возвращает HTML-код или DOM-элемент. Это особенно удобно, если содержимое подсказки зависит от состояния приложения или данных:

tippy('#my-button', {
  content(reference) {
    const userName = reference.getAttribute('data-user');
    return `<div>
              <strong>${userName}</strong>
              <p>Подробная информация о пользователе</p>
            </div>`;
  },
  allowHTML: true,
  interactive: true
});

Особенности функции-шаблона:

  • Параметр reference — это элемент, к которому привязана подсказка.
  • Можно использовать данные из атрибутов элемента (data-*) для генерации уникального содержимого.
  • Поддерживается как строковый HTML, так и создание элементов через document.createElement.

Встраивание внешних компонентов

Tippy.js отлично интегрируется с фреймворками вроде React, Vue и Svelte. Для этих случаев можно использовать готовые компоненты в качестве шаблона. Например, в чистом JavaScript можно создать DOM-узел и передать его в content:

const tooltipNode = document.createElement('div');
tooltipNode.innerHTML = `
  <h4>Компонентная подсказка</h4>
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
`;

tippy('#my-button', {
  content: tooltipNode,
  interactive: true,
});

Преимущества передачи DOM-узла:

  • Сохраняются обработчики событий на элементах внутри подсказки.
  • Упрощается управление динамическими компонентами.
  • Не требуется повторная генерация HTML при каждом открытии подсказки.

Шаблоны с кастомными стилями

Для индивидуального оформления подсказки можно использовать опцию theme или полностью управлять CSS-классами:

tippy('#my-button', {
  content: document.querySelector('#tooltip-template').innerHTML,
  allowHTML: true,
  interactive: true,
  theme: 'custom-theme'
});

CSS:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  padding: 15px;
  font-family: 'Arial', sans-serif;
}

.tippy-box[data-theme~='custom-theme'] h3 {
  margin-top: 0;
  font-size: 16px;
}

Советы по стилям:

  • Для сложных шаблонов лучше использовать отдельные CSS-классы внутри содержимого, чтобы не перегружать глобальные стили Tippy.
  • Можно комбинировать тему Tippy и внутренние стили шаблона для более гибкой настройки.

Динамическое обновление содержимого

Tippy.js позволяет менять содержимое подсказки после инициализации с помощью метода setContent:

const instance = tippy('#my-button', {
  content: '<p>Первоначальное содержимое</p>',
  allowHTML: true
});

document.querySelector('#my-button').addEventListener('click', () => {
  instance[0].setContent('<p>Обновленное содержимое после клика</p>');
});

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

  • Позволяет использовать одну подсказку для разных состояний интерфейса.
  • Сохраняются все настройки интерактивности и позиционирования.
  • Можно использовать с шаблонами HTML или DOM-элементами.

Итоговые рекомендации по шаблонам

  • Для простых подсказок достаточно использовать innerHTML скрытого элемента.
  • Для динамических или интерактивных подсказок лучше применять функции-шаблоны или DOM-узлы.
  • Всегда включать allowHTML: true при работе с HTML-разметкой.
  • Для сложных дизайнов использовать собственные CSS-классы и темы Tippy.

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

Оглавление