Атрибут title тега <pre>
Описание
Атрибут title для тега <pre> добавляет всплывающую подсказку, которая появляется при наведении курсора на блок предварительно форматированного текста. Подсказка отображается в небольшом желтом прямоугольнике рядом с элементом.
<pre title="Пример конфигурационного файла в формате JSON">
{
"name": "My App",
"version": "1.0.0",
"settings": {
"darkMode": true
}
}
</pre>
Особенности работы:
| Платформа | Поведение |
|---|---|
| Десктопные браузеры | Подсказка появляется после небольшой задержки при наведении |
| Мобильные устройства | Часто не отображается (нет события hover) |
Рекомендации по использованию:
- Используйте для пояснения назначения блока кода/текста
- Держите текст кратким (1-2 предложения)
- Не дублируйте содержимое блока
<pre> - Избегайте важной информации только в
title
Пример с форматированием:
<pre title="Формат: JSON
Автор: Иван Петров
Дата создания: 2025-05-15">
{
"userId": 12345,
"userName": "john_doe"
}
</pre>
Советы для доступности:
- Для важных пояснений дублируйте информацию в видимом тексте
- Сочетайте с атрибутом
aria-labelдля скринридеров - Помните, что некоторые скринридеры могут не читать
title
Ограничения:
- Нельзя стилизовать стандартную подсказку
- Ограниченная поддержка на мобильных устройствах
- Некоторые браузеры обрезают длинный текст
Примечание: Для создания стилизованных и более функциональных подсказок рассмотрите использование CSS-решений (псевдоэлементы) или JavaScript-библиотек (tippy.js, popper.js), которые обеспечивают лучший контроль над отображением.
Пример с CSS-подсказкой:
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 0;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
</style>
<pre class="custom-tooltip" data-tooltip="Конфигурация сервера">
server_port = 8080
debug_mode = true
</pre>