Атрибут title тега <q>
Описание
Атрибут title для тега <q> добавляет всплывающую подсказку, которая появляется при наведении курсора на цитату. Подсказка отображается в небольшом желтом прямоугольнике рядом с элементом.
<q title="Автор: Лев Толстой | Источник: Война и мир">
Все счастливые семьи похожи друг на друга...
</q>
Особенности работы:
| Платформа | Поведение |
|---|---|
| Десктопные браузеры | Подсказка появляется после небольшой задержки при наведении |
| Мобильные устройства | Часто не отображается (нет события hover) |
Рекомендации по использованию:
- Используйте для указания автора и источника цитаты
- Держите текст кратким (1-2 предложения)
- Форматируйте сложные подсказки с помощью символов новой строки (
\n) - Не дублируйте содержимое цитаты
Пример с форматированием:
<q title="Автор: Фёдор Достоевский\nПроизведение: Братья Карамазовы\nГод: 1880">
Красота спасёт мир.
</q>
Советы для доступности:
- Дублируйте важную информацию в видимом тексте
- Сочетайте с атрибутом
citeдля машинно-читаемых ссылок - Помните, что скринридеры могут не озвучивать
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: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: pre;
font-size: 14px;
}
</style>
<q class="custom-tooltip" data-tooltip="Автор: Антон Чехов\nИсточник: Вишнёвый сад">
Краткость — сестра таланта.
</q>