Атрибут title тега <dir>
Описание
Атрибут title добавляет всплывающую подсказку к элементу <dir>, но важно отметить, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с атрибутом title.
Важно: Элемент <dir> устарел в HTML5. Для добавления подсказок к спискам используйте <ul> или <ol> с атрибутом title.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir title="Список файлов в директории">
<li>file1.txt</li>
<li>file2.txt</li>
</dir>
Современная альтернатива:
<ul title="Список документов (последнее обновление: 15.06.2023)">
<li>Договор.docx</li>
<li>Отчет.pdf</li>
</ul>
Особенности работы:
| Платформа | Поведение | Ограничения |
|---|---|---|
| Десктопные браузеры | Подсказка при наведении | Ограниченная стилизация |
| Мобильные устройства | Часто недоступно | Нельзя полагаться |
| Скринридеры | Обычно озвучивают | Зависит от настроек |
Рекомендации по содержимому:
<!-- 1. Описание назначения списка -->
<ul title="Список последних измененных файлов">
<li>index.html</li>
<li>styles.css</li>
</ul>
<!-- 2. Мета-информация -->
<ul title="Всего элементов: 5 | Последнее обновление: 12:30">
<li>Задача 1</li>
<li>Задача 2</li>
</ul>
<!-- 3. Инструкции -->
<ul title="Выберите один или несколько элементов (Ctrl+Click)">
<li>Вариант 1</li>
<li>Вариант 2</li>
</ul>
Динамическое обновление title:
<ul id="fileList" title="Файлов: 0">
<li>Документ 1</li>
<li>Документ 2</li>
</ul>
<script>
const list = document.getElementById('fileList');
list.title = `Файлов: ${list.children.length} | Последнее обновление: ${new Date().toLocaleTimeString()}`;
</script>
Ограничения и лучшие практики:
- Держите текст подсказки кратким (1-2 предложения)
- Не используйте для критически важной информации
- Для сложных подсказок используйте JavaScript-библиотеки (Tippy.js, Popper.js)
- Сочетайте с ARIA-атрибутами для лучшей доступности
- Тестируйте на разных устройствах и платформах
Альтернативные подходы:
<ul aria-describedby="listDesc">
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
<div id="listDesc" class="sr-only">Описание назначения списка</div>
<!-- С использованием библиотеки для тултипов -->
<ul id="tooltipList">
<li>Пункт меню</li>
</ul>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy('#tooltipList', {
content: 'Расширенное описание списка',
placement: 'right'
});
</script>
Примечание: Хотя атрибут title предоставляет базовые возможности подсказок, для профессиональных интерфейсов рассмотрите использование специализированных решений, которые обеспечивают лучший контроль над отображением, позиционированием и стилизацией всплывающих подсказок.