Атрибут title тега <progress>
Описание
Атрибут title для тега <progress> добавляет всплывающую подсказку, которая появляется при наведении курсора на элемент прогресс-бара. Подсказка отображается в небольшом желтом прямоугольнике рядом с элементом.
<progress
value="75"
max="100"
title="Прогресс загрузки: 75%">
75%
</progress>
Особенности работы:
| Платформа | Поведение |
|---|---|
| Десктопные браузеры | Подсказка появляется при наведении (после небольшой задержки) |
| Мобильные устройства | Часто не отображается (нет события hover) |
Рекомендации по использованию:
- Используйте для пояснения текущего состояния прогресса
- Держите текст кратким (1-2 предложения)
- Обновляйте динамически при изменении значения
- Не дублируйте информацию из содержимого тега
Советы для доступности:
- Дублируйте важную информацию в видимом тексте
- Сочетайте с атрибутом
aria-labelдля скринридеров - Помните, что некоторые скринридеры могут не читать
title
Ограничения:
- Нельзя стилизовать стандартную подсказку
- Ограниченная поддержка на мобильных устройствах
- Некоторые браузеры обрезают длинный текст
Пример с CSS-подсказкой:
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
</style>
<progress
class="custom-tooltip"
value="50"
max="100"
data-tooltip="Загружено 50 из 100 МБ">
50%
</progress>
Примечание: Для создания стилизованных и более функциональных подсказок рассмотрите использование CSS-решений (псевдоэлементы) или JavaScript-библиотек (tippy.js, popper.js), которые обеспечивают лучший контроль над отображением.