Атрибут title тега <dt>
Описание
Атрибут title добавляет всплывающую подсказку к элементу <dt> (термину в списке определений), которая появляется при наведении курсора.
Особенность: Подсказка не отображается на сенсорных устройствах при обычном касании.
Пример использования:
<dl>
<dt title="HyperText Markup Language">HTML</dt>
<dd>Язык разметки веб-страниц</dd>
<dt title="Cascading Style Sheets">CSS</dt>
<dd>Язык стилей для оформления</dd>
</dl>
Основные характеристики:
| Характеристика | Описание |
|---|---|
| Отображение | Всплывающее окно при наведении (зависит от браузера) |
| Содержимое | Только текст (HTML-разметка не поддерживается) |
| Доступность | Частично доступен для скринридеров |
Рекомендации по содержанию:
<!-- Хорошая практика: краткие пояснения -->
<dt title="Язык программирования для веб-страниц">JavaScript</dt>
<!-- Плохая практика: избыточная информация -->
<dt title="JavaScript - это мультипарадигменный язык программирования, который...">JS</dt>
Использование с CSS:
<style>
/* Стиль для терминов с подсказками */
dt[title] {
border-bottom: 1px dotted #666;
cursor: help;
}
/* Альтернативное отображение подсказки */
dt[title]:hover::after {
content: attr(title);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
margin-top: 20px;
}
</style>
<dl>
<dt title="Document Object Model">DOM</dt>
<dd>Программный интерфейс для документов</dd>
</dl>
Ограничения и решения:
| Проблема | Решение |
|---|---|
| Не работает на мобильных устройствах | Используйте кастомные тултипы |
| Нет контроля над стилем | Создайте CSS-тултипы |
| Ограниченная доступность | Добавьте aria-label |
Альтернативы для лучшей доступности:
<dl>
<dt aria-label="JavaScript - язык программирования">
<span class="tooltip" data-tooltip="Язык программирования для веб-страниц">JS</span>
</dt>
<dd>Динамический язык программирования</dd>
</dl>
<style>
.tooltip[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
}
</style>
Примечание: Хотя атрибут title удобен для простых подсказок, для важной информации рекомендуется использовать более надежные решения с CSS и JavaScript, особенно в современных веб-приложениях.