HTML содержимое

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

Включение HTML в тултип

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

tippy('#myButton', {
  content: '<strong>Жирный текст</strong> и <em>курсив</em>',
  allowHTML: true
});

Пояснение:

  • content – строка, содержащая HTML-разметку.
  • allowHTML: true – разрешает интерпретацию HTML внутри тултипа. Без этой опции HTML будет отображаться как текст, включая теги.

Использование DOM-элементов

Помимо строки, в content можно передавать DOM-элемент или Node:

const tooltipContent = document.createElement('div');
tooltipContent.innerHTML = `
  <h4>Заголовок</h4>
  <p>Описание с <a href="#">ссылкой</a></p>
`;

tippy('#myButton', {
  content: tooltipContent,
  allowHTML: true
});

Преимущества такого подхода:

  • Можно создавать сложные структуры без необходимости экранировать HTML.
  • Легко управлять динамическим контентом через JavaScript.
  • Возможность добавлять события и интерактивные элементы внутрь тултипа.

Интерактивные тултипы

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

tippy('#interactiveBtn', {
  content: '<button id="insideBtn">Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  onShow(instance) {
    const button = instance.popper.querySelector('#insideBtn');
    button.addEventListener('click', () => {
      alert('Кнопка внутри тултипа нажата!');
    });
  }
});

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

  • interactive: true предотвращает закрытие тултипа при наведении на его содержимое.
  • Внутри onShow можно добавлять обработчики событий для элементов тултипа.
  • Использование instance.popper.querySelector позволяет находить элементы внутри тултипа динамически.

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

Содержимое тултипа можно менять после его создания через метод setContent:

const myTippy = tippy('#dynamicBtn', {
  content: '<p>Первый контент</p>',
  allowHTML: true
});

document.querySelector('#changeContent').addEventListener('click', () => {
  myTippy[0].setContent('<p>Новый <strong>HTML</strong> контент</p>');
});

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

  • setContent принимает как строку с HTML, так и DOM-элемент.
  • Можно динамически обновлять текст и структуру тултипа без пересоздания экземпляра.

Безопасность при работе с HTML

Использование HTML повышает риск XSS-уязвимостей, особенно если контент формируется из внешних источников. Рекомендуется:

  • Сохранять allowHTML: true только для доверенного контента.
  • Экранировать или санитизировать пользовательский ввод перед вставкой в content.
  • Предпочитать использование DOM-элементов через createElement вместо вставки сырого HTML, если содержимое динамическое.

Применение шаблонов и сложных структур

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

const card = document.createElement('div');
card.innerHTML = `
  <img src="avatar.jpg" alt="Аватар" width="50">
  <h3>Имя пользователя</h3>
  <p>Краткое описание профиля.</p>
  <button>Подробнее</button>
`;

tippy('#profileBtn', {
  content: card,
  allowHTML: true,
  interactive: true
});

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

Итоговые рекомендации по HTML в Tippy.js

  • Всегда включать allowHTML: true при работе с HTML-контентом.
  • Для интерактивных элементов добавлять interactive: true.
  • Использовать DOM-элементы вместо строки, если содержимое динамическое или сложное.
  • Санитизировать внешние данные, чтобы исключить XSS-уязвимости.
  • Метод setContent позволяет обновлять HTML без пересоздания тултипа.

HTML-содержимое расширяет возможности Tippy.js, превращая простые подсказки в гибкие и интерактивные интерфейсные элементы, управляемые через JavaScript.

Оглавление