Добавление переноса строк в HTML-подсказке: решение

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

Для вставки переносов строк в всплывающие подсказки используйте HTML-сущности 
 или 
 в атрибуте title.

<a title="Первая строка&#013;Вторая строка">Наведите на меня!</a>

Вы можете размещать эти сущности в любом месте, где предполагается начало новой строки. Таким образом, текст подсказки будет отображаться построчно при наведении на ссылку.

Альтернативные способы и дополнительные инструменты

Помимо HTML-сущностей, доступно множество методов для форматирования подсказок и переноса строк. Давайте рассмотрим некоторые из них.

Использование CSS для настройки форматирования текста

CSS позволяет детально настроить внешний вид пользовательских подсказок:

/* CSS, проникает в глубь структуры */
.tooltip-inner {
  white-space: pre-wrap; /* Учитывает пробелы и переносы строк */
}

Примените это свойство CSS к содержимому подсказки, затем добавьте переход на новую строку прямо в редакторе текста. Готово! Теперь текст в подсказке будет с переносами строк.

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

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

Если вы используете плагины для подсказок, например, Bootstrap, атрибут data-html="true" предоставит вам новые возможности:

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

В этом случае атрибут title может содержать HTML, что позволяет использовать тег <br> для переноса строки.

Форматирование текста не только для особых случаев

Если ваши подсказки требуют специального оформления, например, блоков кода, тег pre и свойство CSS white-space: pre-line; будут полезны:

/* CSS, управляющий форматированием текста */
.tooltip-inner {
  white-space: pre-line; /* Учитывает переносы строк и пробелы */
}

И сопутствующий HTML:

<a href="#" title="<pre>Строка1\nСтрока2</pre>" data-html="true">Наведите на меня!</a>

Делаем подсказки более удобными для пользователя

Доступность — это неотъемлемая часть хорошего пользовательского опыта. Используйте атрибут aria-describedby и придерживайтесь стандартов WAI ARIA. Ваши усилия помогут пользователям воспользоваться вспомогательными технологиями!

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

Визуализация помогает лучше понять сделанное — давайте разберемся:

<a href="#" title="Строка1&#10;Строка2">Наведите на меня!</a>

При наведении появляется подсказка, и эта не простая подсказка, а двустрочная!

До: [💬 "Привет! Вместе мы сила!"]
После:  [💬 "Привет!"
          💬 "Вместе мы сила!"]

Понравилось? Это волшебный эффект 
. 🖱️ ➡️ 💬 ➡️ 💬 ➡️ 😄

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

1. title – HTML: HyperText Markup Language | MDN — подробное описание атрибута title в HTML.
2. CSS Tooltip — управление подсказками с помощью CSS: практическое руководство.
3. Javascript – jQuery: исключение дочерних элементов из .text() – Stack Overflow — обсуждение вопросов работы с текстом в сообществе Stack Overflow.
4. ARIA Authoring Practices Guide | APG | WAI | W3C — aria-describedby и лучшие практики доступности для подсказок; руководство по доступности подсказок.
5. CodePen Collection: Various Tooltip Designs and Animations — сборник примеров подсказок с разнообразным дизайном и анимацией.