Многострочный tooltip в HTML: newline в атрибуте title

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

Многострочный текст в всплывающей подсказке при наведении курсора можно создать с помощью 
 в атрибуте title элемента <td>.

Пример:

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

Итогом будет двустрочная всплывающая подсказка, в которой "Строка 1" расположена над "Строка 2".

Альтернативы атрибуту title в HTML

Атрибут title – это только один из способов отображения подсказок. В арсенале разработчика есть и другие методы, в частности OverLib или возможность создания всплывающих подсказок на чистом CSS, предоставляющих более детализированный контроль над внешним видом и содержанием подсказок.

<td data-tooltip="Первая строка<br>Вторая строка">Наведите на меня</td>

JavaScript-библиотеки помогают создавать подсказки с HTML-содержимым и анимацией. Тогда как подсказки на CSS предоставляют больше возможностей для стилизации и взаимодействия.

Примечание: Проверяйте отображение ваших подсказок для браузеров Internet Explorer, Firefox v12+, и Chrome 28+, чтобы быть уверенным в их корректной работе.

Создание многострочных подсказок при помощи CSS

Для создания многострочной подсказки на CSS достаточно вставить текст внутрь div или воспользоваться <br>, после чего можно стилизовать и позиционировать их с помощью CSS.

Позиционирование и стилизация

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

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

Переходы

Чтобы подсказки отображались более плавно и привлекательно, используйте переходы.

Варианты резервного содержимого

Обращайте внимание на обратную совместимость с помощью атрибута alt или меток ARIA, чтобы пользователи могли получить необходимую информацию даже при отключенном CSS или JavaScript.

Расширение возможностей подсказок с помощью JavaScript-библиотек

Библиотеки JavaScript такого типа как OverLib, расширяют функционал стандартных подсказок, предлагая дополнительные опции оформления.

Индивидуальные макеты

Вы можете тонко настроить внешний вид подсказок, внедряя разнообразие HTML-содержимого в зависимости от конкретных потребностей вашего проекта.

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

Основная функция подсказок – эффективность взаимодействия с пользователем, однако, важно также учесть, что подсказки не должны мешать навигации.

Стремление к плавному снижению функциональности

Учитывайте пользователей, у которых отключен JavaScript. Для них важно предусмотреть возможность понимания содержимого через title.

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

1. JavaScript post request like a form submit – Stack Overflow – пример имитации отправки формы с использованием JavaScript.
2. CSS Tooltip – W3Schools – туториал по созданию подсказок на CSS.
3. title – HTML: HyperText Markup Language | MDN – подробная информация от MDN о атрибуте title в HTML.
4. aria-label is a xenophobe: HeydonWorks – статья о кодировании HTML-сущностей для улучшения доступности.
5. HTML Character Entities – W3Schools – справочник по HTML-сущностям.
6. Tooltip Styles Inspiration | Codrops – галерея стилевых решений для подсказок, способная вдохновить на новые идеи.
7. Using data attributes – Learn web development | MDN – руководство по использованию атрибутов данных в HTML.