Текстовый контент

Tooltipster — это мощная библиотека для создания интерактивных всплывающих подсказок в JavaScript. Основная задача при работе с текстовым контентом заключается в правильной передаче и форматировании информации, чтобы подсказка была читаемой, адаптивной и визуально привлекательной.

Передача текстового контента

Самый простой способ добавить текстовую подсказку — передать строку при инициализации:

$('.tooltip').tooltipster({
    content: 'Простая текстовая подсказка'
});

Здесь content может быть как обычной строкой, так и объектом jQuery или DOM-элементом. Использование строки оптимально для небольших и статических подсказок.

HTML-содержимое

Для сложного форматирования текста можно включать HTML-разметку:

$('.tooltip-html').tooltipster({
    content: $('<span style="color:red;">Красный текст</span>'),
    theme: 'tooltipster-shadow'
});
  • Использование HTML позволяет включать ссылки, переносы строк, списки и стили.
  • Необходимо помнить, что при включении HTML контент не должен быть небезопасным, иначе возможны XSS-уязвимости.

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

Tooltipster поддерживает динамическое изменение текста после инициализации:

var instance = $('.tooltip-dynamic').tooltipster().tooltipster('instance');
instance.content('Новый текст подсказки');
  • Метод instance.content() позволяет обновлять текст в любой момент времени.
  • Динамическая подстановка особенно полезна для подсказок с данными из API или форм.

Работа с длинным текстом

Для больших объёмов текста рекомендуется использовать опцию maxWidth:

$('.tooltip-long').tooltipster({
    content: 'Очень длинный текст...',
    maxWidth: 300
});
  • maxWidth ограничивает ширину подсказки, предотвращая растягивание страницы.
  • Для больших текстов также полезна прокрутка через CSS:
.tooltipster-content {
    max-height: 200px;
    overflow-y: auto;
}

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

Чтобы текст отображался корректно на нескольких строках:

  • В HTML используйте <br> для принудительных переносов.
  • В CSS применяйте white-space: normal; для автоматического переноса слов:
.tooltipster-content {
    white-space: normal;
}

Локализация текста

Tooltipster позволяет легко работать с текстом на разных языках. Контент можно задавать динамически в зависимости от текущего языка:

var messages = {
    en: 'Tooltip in English',
    ru: 'Подсказка на русском'
};

$('.tooltip-i18n').tooltipster({
    content: messages['ru']
});
  • Такой подход позволяет хранить все переводы централизованно и подставлять их по ключу.

Темизация текста

Текст можно дополнительно стилизовать через встроенные темы Tooltipster или пользовательские CSS-классы:

$('.tooltip-themed').tooltipster({
    content: 'Стильная подсказка',
    theme: ['tooltipster-borderless', 'custom-text-theme']
});
.custom-text-theme .tooltipster-content {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}
  • Комбинирование нескольких тем даёт гибкость в визуальном оформлении.
  • Можно создавать уникальные шрифты, цвета и отступы для каждой подсказки.

Поддержка мультимедиа в текстовом контенте

Хотя основная задача — текст, в Tooltipster легко интегрировать небольшие изображения или иконки в текстовую подсказку:

$('.tooltip-icon').tooltipster({
    content: $('<span><img src="icon.png" alt=""> Текст с иконкой</span>')
});
  • Такая практика помогает делать подсказки более наглядными и информативными.

Советы по производительности

  • Для большого количества подсказок лучше использовать инициализацию через делегирование событий.
  • Динамическое обновление текста лучше выполнять через экземпляры, а не полностью переинициализировать подсказку.
  • Минимизировать использование сложного HTML в каждой подсказке, чтобы не перегружать DOM.
Оглавление