Атрибут title тега <dl>
Описание
Атрибут title добавляет всплывающую подсказку к элементу <dl> (списку определений), которая появляется при наведении курсора. Подсказка отображается в небольшом желтом прямоугольнике (зависит от браузера).
Ограничение: Подсказка не отображается на мобильных устройствах при касании, только при долгом нажатии (зависит от устройства).
Пример использования:
<dl title="Глоссарий веб-технологий" style="border: 1px solid #ddd; padding: 10px;">
<dt title="Язык гипертекстовой разметки">HTML</dt>
<dd>Основа создания веб-страниц</dd>
<dt title="Каскадные таблицы стилей">CSS</dt>
<dd>Язык описания внешнего вида документов</dd>
</dl>
Основные характеристики:
| Характеристика | Описание |
|---|---|
| Отображение | Всплывающее окно при наведении (зависит от браузера) |
| Содержимое | Только текст (HTML-разметка не интерпретируется) |
| Доступность | Частично доступен для скринридеров (зависит от реализации) |
Рекомендации по использованию:
<!-- Хорошая практика: краткие пояснения -->
<dl title="Список терминов по фронтенд-разработке">
<dt title="Document Object Model">DOM</dt>
<dd>Программный интерфейс для документов HTML/XML</dd>
</dl>
<!-- Плохая практика: избыточная информация -->
<dl title="Это список определений, содержащий термины и их объяснения...">
<dt>JavaScript</dt>
<dd>Язык программирования</dd>
</dl>
Ограничения и проблемы:
- Не поддерживает форматирование текста (жирный, курсив и т.д.)
- Время появления/исчезновения нельзя контролировать
- Дизайн подсказки зависит от браузера и ОС
- Не заменяет доступный текст для скринридеров
Альтернативы для лучшей доступности:
<dl aria-label="Глоссарий терминов веб-разработки">
<dt aria-describedby="dom-desc">DOM</dt>
<dd id="dom-desc">Программный интерфейс для документов</dd>
</dl>
<!-- Кастомный тултип через CSS -->
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 100;
}
</style>
<dl class="custom-tooltip" data-tooltip="Веб-технологии">
<dt>API</dt>
<dd>Интерфейс программирования приложений</dd>
</dl>
Динамическое изменение через JavaScript:
<dl id="dynamic-title-list" title="Исходное описание">
<dt>AJAX</dt>
<dd>Асинхронный JavaScript и XML</dd>
</dl>
<button onclick="updateTitle()">Обновить подсказку</button>
<script>
function updateTitle() {
const list = document.getElementById('dynamic-title-list');
list.title = `Обновлено: ${new Date().toLocaleTimeString()}`;
}
</script>
Советы по контенту:
- Используйте для кратких пояснений (50-100 символов)
- Избегайте дублирования видимого текста
- Для важной информации используйте видимые элементы
- Проверяйте отображение в разных браузерах
- Не используйте для критической информации
Сравнение с аналогичными технологиями:
| Технология | Преимущества | Недостатки |
|---|---|---|
| Атрибут title | Простота, встроенная поддержка | Ограниченная стилизация, проблемы доступности |
| ARIA-атрибуты | Лучшая доступность | Сложнее в реализации |
| Кастомные тултипы | Полный контроль над стилем и поведением | Требует дополнительного CSS/JS |
Примечание: Хотя атрибут title удобен для простых подсказок, в современных веб-приложениях рекомендуется использовать более надежные и доступные решения, особенно для важного контента. Для сложных интерфейсов рассмотрите специализированные библиотеки тултипов.