Атрибут title тега <dialog>
Описание
Атрибут title добавляет текстовую подсказку к диалоговому окну, которая отображается при наведении курсора. Для элемента <dialog> этот атрибут особенно полезен для:
- Добавления контекстной информации о назначении диалога
- Предоставления кратких инструкций
- Отображения дополнительных сведений о содержимом
Примеры использования
<!-- 1. Подсказка о назначении диалога -->
<dialog title="Редактирование профиля пользователя">
<h3>Настройки аккаунта</h3>
<!-- Форма редактирования -->
</dialog>
<!-- 2. Информация о состоянии -->
<dialog title="Автосохранение: 15:42 | Версия 2.1.3">
<h3>Редактор документа</h3>
<!-- Содержимое редактора -->
</dialog>
<!-- 3. Важное предупреждение -->
<dialog title="Внимание! Это действие нельзя отменить">
<h3>Подтверждение удаления</h3>
<p>Вы уверены, что хотите удалить этот элемент?</p>
</dialog>
Особенности работы в разных контекстах
| Тип диалога | Поведение title | Рекомендации |
|---|---|---|
| Обычный диалог | Подсказка видна при наведении | Используйте для вспомогательной информации |
| Модальный диалог | Подсказка не отображается | Дублируйте важную информацию в содержимом |
| Мобильные устройства | Часто недоступно | Не полагайтесь только на title |
Лучшие практики
<!-- 1. Сочетание с ARIA для доступности -->
<dialog
title="Форма обратной связи"
aria-labelledby="dialogTitle"
aria-describedby="dialogDesc">
<h3 id="dialogTitle">Обратная связь</h3>
<p id="dialogDesc">Заполните все обязательные поля</p>
</dialog>
<!-- 2. Динамическое обновление -->
<dialog id="statusDialog" title="Статус: не сохранено">
<button onclick="updateStatus()">Сохранить</button>
</dialog>
<script>
function updateStatus() {
const dialog = document.getElementById('statusDialog');
dialog.title = "Статус: сохранено в " + new Date().toLocaleTimeString();
}
</script>
Ограничения и альтернативы
- Недоступность в модальных окнах: Для модальных диалогов используйте видимые заголовки
- Ограниченная видимость: На мобильных устройствах подсказки часто не отображаются
- Альтернатива: Для сложных подсказок используйте компоненты тултипов (Tippy.js, Popper.js)
- Доступность: Всегда дублируйте важную информацию в видимом содержимом
Стилизация (если поддерживается)
<style>
/* Некоторые браузеры позволяют стилизовать тултипы */
dialog[title] {
position: relative;
}
dialog[title]:hover::after {
content: attr(title);
position: absolute;
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
z-index: 1000;
}
</style>
Примечание: Хотя атрибут title обеспечивает базовую функциональность подсказок, для профессиональных интерфейсов рекомендуется использовать специализированные решения, которые гарантируют стабильное отображение во всех контекстах и на всех устройствах.