Многострочные всплывающие подсказки в Bootstrap без <br>

Быстрый ответ

Если вы хотите сделать всплывающие подсказки Bootstrap многострочными, включите поддержку HTML в атрибутах, задав data-html="true". Используйте тег <br> для внедрения переносов строк в атрибуте title:

<a href="#" data-toggle="tooltip" data-html="true" title="Первая строка<br>Вторая строка">Наведите на меня</a>

Воспользуйтесь следующим JavaScript-кодом для инициализации всплывающих подсказок:

// Инициализация всплывающих подсказок с помощью функции tooltip
$('[data-toggle="tooltip"]').tooltip();

Напоследок, примените HTML-кодировку для переводов строк (
 или 
), если они уже были встроены в HTML-атрибут при загрузке страницы. Динамическое добавление этих кодов будет безрезультатным.

Добавление переносов строк во всплывающих подсказках

Использование тегов <br> и HTML-кодированных переносов

Для создания многострочных подсказок служат теги <br>. Если же вы хотите интегрировать динамическое содержимое, сгенерированное сервером, применяйте HTML-кодированные переводы строк, например 
.

Подробнее об этом расскажет наш спикер на видео

Применение свойства CSS white-space

При настройке оформления всплывающих подсказок используйте свойства white-space: pre; или white-space: pre-wrap;, чтобы обеспечить учет переносов строк и автоматический перенос текста.

/* Оформление всплывающих подсказок */
.tooltip-inner {
  white-space: pre-wrap;
}

Расширение функционала всплывающих подсказок

Включение обработки HTML в подсказках

Для того чтобы использовать HTML-теги в подсказках, активируйте опцию data-html="true" в Bootstrap. Это позволит обрабатывать такие теги, как <br>, <strong> и прочие.

Интеграция с Angular UI Bootstrap

Если вы используете Angular и Angular UI Bootstrap, воспользуйтесь атрибутом uib-tooltip-html. Чтобы предотвратить возможные проблемы с санацией контента, используйте $sce.trustAsHtml().

// Используйте $sce.trustAsHtml для обеспечения безопасности HTML-содержимого
$scope.safeContent = $sce.trustAsHtml('Первая строка<br>Вторая строка');

Отдайте предпочтение tooltip-html вместо устаревшего tooltip-html-unsafe.

<button uib-tooltip-html="safeContent">Наведите на меня!</button>

Особенности работы с всплывающими подсказками

Управление переносами строки в подсказках

Если текст в подсказке получается слишком длинным, проверьте, что в CSS-свойствах указано max-width или white-space: pre-wrap;. Это поможет избежать выхода текста за границы элемента.

Избегайте вставки HTML непосредственно в атрибуты title

Не следует вставлять HTML-код прямо в атрибуты title. Вместо этого используйте специализированные атрибуты данных, например, data-original-title в Bootstrap.

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

Регулярно обновляйте свои JavaScript-библиотеки. Это обеспечит вам доступ к новым функциям и улучшениям работы всплывающих подсказок.

Визуализация

Поймите принципы создания многострочных всплывающих подсказок, благодаря нашей визуализации в виде «сэндвича»:

🥪 — Сэндвич всплывающих подсказок
_____________
| Лист салата 🥬   | <- Всплывающая подсказка с новой строкой
| Помидор 🍅       | <- Это уже другая строка
| Слой сыра 🧀     | <- И ещё одна строка
_____________

Чтобы «собрать» такой «сэндвич», просто задайте "data-html=true" и вставьте переносы строк с помощью <br>:

<button data-toggle="tooltip" data-html="true" title="Лист салата 🥬<br>Помидор 🍅<br>Слой сыра 🧀">
  Наведите на меня!
</button>

Угощайтесь нашими "сэндвичами" в виде многострочных всплывающих подсказок каждый день!

Расширение инструментария

Использование rel="tooltip" для элементов, не являющихся ссылками

Для добавления всплывающих подсказок к элементам, которые не имеют обычного атрибута title, примените rel="tooltip".

Разнообразие сценариев использования подсказок

Всплывающие подсказки можно использовать в различных сценариях – от Vuex до Redux. В зависимости от конкретной задачи, подсказки могут содержать как компактный, так и сложный многострочный текст. Главное – учитывать удобочитаемость.

Изучайте на практике с примерами на jsFiddle

Предпочитаете интерактивное обучение? Изучайте и экспериментируйте с кодом на jsFiddle, где представлены примеры как простого, так и сложного использования подсказок.

Полезные материалы

1. Официальная документация по всплывающим подсказкам от Bootstrap поможет вам освоить все нюансы их использования.
2. W3Schools предоставит знания об основных аспектах работы с всплывающими подсказками Bootstrap.
3. Изучите рекомендации MDN по использованию тега <abbr> в подсказках.
4. Обратите внимание на отчеты о проблемах с всплывающими подсказками и их настройке на GitHub.
5. Не пренебрегайте исследованием исходного кода Tooltip.js от Bootstrap для более глубокого понимания его работы.