Атрибут title тега <button>
Описание
Атрибут title добавляет всплывающую подсказку (tooltip) к кнопке, которая появляется при наведении курсора. Это полезно для:
- Дополнительного описания функционала кнопки
- Пояснения иконок без текста
- Улучшения доступности
<button title="Сохранить текущий документ">
💾
</button>
<button title="Форма будет отправлена на сервер">
Отправить
</button>
| Аспект | Поведение | Особенности |
|---|---|---|
| Отображение | Всплывающая подсказка при наведении | Зависит от браузера и ОС |
| Доступность | Частично поддерживается скринридерами | Лучше использовать aria-label |
| Содержимое | Только текст (без HTML-разметки) | Максимум ~200 символов |
Рекомендации по использованию:
- Используйте краткие, информативные подсказки (1-2 слова)
- Для иконок без текста обязателен title или aria-label
- Избегайте дублирования видимого текста кнопки
- Не используйте для критически важной информации
Сравнение с aria-label:
<!-- Для визуальных подсказок -->
<button title="Поиск по сайту">🔍</button>
<!-- Для доступности -->
<button aria-label="Поиск по сайту">🔍</button>
<!-- Комбинированный подход -->
<button title="Поиск" aria-label="Поиск по сайту">🔍</button>
Динамическое изменение:
<button id="status-btn" title="Статус: не активен">
Проверить статус
</button>
<script>
document.getElementById('status-btn').addEventListener('click', function() {
this.title = "Статус: выполняется проверка...";
});
</script>
Примечание: Хотя title обеспечивает базовую доступность, для сложных интерфейсов рекомендуется использовать комбинацию aria-атрибутов и кастомных tooltip-компонентов.