Атрибут title тега <video>
Описание
Атрибут title для тега <video> задает всплывающую подсказку, которая появляется при наведении курсора на видео-элемент. Это полезно для предоставления дополнительной информации о видео без загромождения интерфейса.
<video
controls
width="400"
title="Демонстрация работы с HTML5 видео"
src="example.mp4">
Ваш браузер не поддерживает видео тег.
</video>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
| текст | Произвольная текстовая строка | Для любых пояснений к видео |
Особенности работы:
- Подсказка появляется при наведении на любую часть видео-элемента
- Максимальная длина текста зависит от браузера
- Поддерживается всеми браузерами, работающими с HTML5
- Не влияет на доступность (для screen readers используйте атрибут
aria-label)
Пример с CSS стилизацией подсказки:
<style>
video:hover::after {
content: attr(title);
position: absolute;
background: rgba(0,0,0,0.8);
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
}
</style>
<video
controls
width="400"
title="Кастомизированная подсказка для видео"
src="example.mp4">
</video>
Рекомендации:
- Используйте краткие, но информативные подсказки
- Не дублируйте информацию из других элементов интерфейса
- Для важной информации используйте видимые элементы, а не только title
- Сочетайте с другими атрибутами доступности
Ограничения:
- На мобильных устройствах подсказка может не отображаться
- Не поддерживает HTML-разметку внутри текста
- Время отображения подсказки контролируется браузером
Примечание: Для сложных тултипов рассмотрите использование JavaScript-библиотек:
- Tooltip.js
- Tippy.js
- Popper.js