Текстовое содержимое

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

tippy('#button', {
  content: 'Простая подсказка'
});

Здесь свойство content принимает строку, которая отображается при наведении на элемент с идентификатором button. Важно учитывать, что передача обычного текста безопасна и предотвращает XSS-уязвимости, так как Tippy.js автоматически экранирует содержимое.

Использование HTML в тексте

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

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

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

  • Любой HTML-код будет отрисован внутри подсказки.
  • Без allowHTML: true все HTML-теги будут отображаться как обычный текст.
  • Необходимо осторожно использовать динамический HTML из ненадёжных источников, чтобы не допустить XSS.

Динамическое текстовое содержимое

Tippy.js поддерживает функцию в качестве значения content. Это полезно, когда текст подсказки зависит от состояния страницы или данных, которые меняются во времени.

tippy('#button', {
  content(reference) {
    return `Текущая дата: ${new Date().toLocaleDateString()}`;
  }
});

Преимущества использования функции:

  • Подсказка формируется «на лету» при каждом наведении.
  • Можно использовать данные из атрибутов HTML элемента, API или глобального состояния.

Использование атрибутов для текста

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

<button id="button" data-tippy-content="Текст из атрибута">Наведи на меня</button>
<script>
  tippy('#button');
</script>

Особенности метода:

  • Удобно для статических страниц.
  • Позволяет хранить текст непосредственно в разметке, не прибегая к JavaScript.
  • Совместимо с динамическими инициализациями Tippy.js.

Форматирование текста с помощью шаблонов

Можно создавать подсказки с более сложной структурой с помощью шаблонов (template). Это позволяет интегрировать текст в кастомные HTML-контейнеры с классами и стилями.

tippy('#button', {
  content: 'Текст подсказки',
  template: '<div class="custom-tippy"><div class="custom-content"></div></div>',
  onShow(instance) {
    instance.popper.querySelector('.custom-content').textContent = instance.props.content;
  }
});

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

  • Полный контроль над HTML-структурой подсказки.
  • Возможность добавлять дополнительные элементы, например иконки или кнопки.
  • Поддержка кастомных классов для стилизации через CSS.

Многострочный текст

Для отображения многострочного текста можно использовать обычные переносы строки \n или тег <br> при включённом allowHTML.

tippy('#button', {
  content: 'Первая строка\nВторая строка',
  allowHTML: true
});

Или с HTML:

tippy('#button', {
  content: 'Первая строка<br>Вторая строка',
  allowHTML: true
});

Рекомендации:

  • Использовать <br> предпочтительно для HTML-контента.
  • Для простого текста перенос \n автоматически конвертируется в многострочный вид через CSS white-space: pre-wrap.

Международные тексты и динамическая локализация

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

const messages = {
  ru: 'Привет, мир!',
  en: 'Hello, world!'
};

tippy('#button', {
  content() {
    const locale = navigator.language.startsWith('ru') ? 'ru' : 'en';
    return messages[locale];
  }
});

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

  • Полная поддержка UTF-8, в том числе кириллицы, китайских и арабских символов.
  • Возможность подстраивать подсказки под пользователя автоматически.

Интерактивное обновление текста

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

const tip = tippy('#button', {
  content: 'Первый текст'
})[0];

setTimeout(() => {
  tip.setContent('Обновлённый текст подсказки');
}, 3000);

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

  • Позволяет изменять текст без пересоздания экземпляра.
  • Подходит для динамических приложений с изменяющимися данными.

Ключевые рекомендации при работе с текстом

  • Использовать allowHTML: true только при необходимости.
  • Для простого текста предпочтительнее передавать строку напрямую или через атрибут data-tippy-content.
  • Динамические функции для content обеспечивают гибкость и актуальность данных.
  • Многострочный текст требует корректного управления переносами или HTML-тегов.
  • В случае сложного форматирования лучше использовать шаблоны (template) и кастомные классы для стилизации.

Эти возможности делают текстовое содержимое Tippy.js мощным инструментом для создания интерактивных, гибких и эстетичных подсказок, которые легко интегрируются в любое веб-приложение.

Оглавление