Как форматировать HTML-подсказки с помощью возврата каретки

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

Для выполнения перевода строк в всплывающей подсказке используйте символы 
 или 
. Эти символы соответствуют возврату каретки и переводу строки соответственно:

<a title="Строка 1&#013;&#010;Строка 2">Наведите для отображения подсказки</a>

В результате всплывающая подсказка будет отображать "Строка 1" над "Строкой 2".

Понятие использования возврата каретки в всплывающих подсказках HTML

Что такое всплывающая подсказка?

Всплывающая подсказка в HTML — это текст, который появляется при наведении курсора на элемент. Обычно для её создания используется атрибут title.

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

Как разделить текст в подсказке на строки?

Для разбиения текста на строки в атрибуте title можно использовать специальные HTML-сущности: 
 и 
. В качестве альтернативы можно ввести перевод строки, просто нажав Enter там, где это требуется.

Существуют ли особенности совместимости?

Разные браузеры могут по-разному интерпретировать коды сущностей (например, Firefox предпочитает 
). поэтому лучше всего использовать оба символа, 
 и 
, чтобы обеспечить единообразное отображение во всех браузерах.

Какие есть особенности при работе с JavaScript?

Если вы работаете с JavaScript, используйте \x0A вместо \n, чтобы обозначить перевод строки. Вам может пригодиться шестнадцатеричное представление символов.

Чего стоит избегать?

Не используйте в атрибуте title <br />, &013;, \r\n или Environment.NewLine, так как эти символы подсказка не распознает.

Значимость соблюдения стандартов и учёт доступности

Следуйте спецификациям HTML и принимайте во внимание доступность. Подсказки с переносами строк повышают удобство и доступность контента.

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

Представьте всплывающую подсказку как слова в воздушных шариках:

До: 🎈(Привет) 🎈(мир)

Нам требуется разместить слово "мир" под словом "привет". Для этого "пробиваем" промежуток между ними с помощью 
:

<span title="Привет&#10;мир">Наведите на меня!</span>

Благодаря 
, похожему на штырь, мы разделяем строки, позволяя "миру" опуститься под "привет":

После: 🎈(Привет)📍
         🎈(мир)

Вот и все! Теперь наше сообщение отображается на двух разных строках.

Дополнительные приемы и специальные случаи в практике

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

JavaScript может быть полезен при работе с динамическим содержимым. Пример:

var myElement = document.getElementById('myElement');
myElement.setAttribute('title', 'Первая строка\nВторая строка');

Использование CSS

Стилизовать всплывающие подсказки можно с помощью CSS. Вы вправе создавать подсказки по своему усмотрению, но помните: большие возможности обязывают.

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  
  /* Позиционирование */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Как сделать подсказку эффективной

• Делайте подсказки краткими и понятными.
• Не используйте HTML-теги внутри title, кроме разрешенных спецсимволов.
• Думайте об доступности: это одна из ключевых функций подсказки.
• Не усложняйте использование JavaScript, если задачу можно решить при помощи простых сущностей.

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

1. CSS Tooltip — методы создания стилизованных подсказок на CSS.
2. title – HTML: HyperText Markup Language | MDN — глубокое понимание использования атрибута title в HTML.
3. Tooltips for Acronyms | CSS-Tricks — усовершенствованные техники для создания подсказок, особенно для акронимов.
4. javascript – How to generate a simple popup using jQuery – Stack Overflow — сообществом разработанные решения для всплывающих окон, применимые и для подсказок.
5. HTML Standard — основной ресурс HTML-сущностей и символов.
6. Tooltips & Toggletips — как обеспечить доступность при оформлении инклюзивных подсказок.