Атрибут title тега <marquee>
Описание
Атрибут title для тега <marquee> добавляет всплывающую подсказку, которая появляется при наведении курсора. Хотя тег устарел, атрибут title остается стандартным механизмом для подсказок.
<marquee title="Последние новости - обновляется ежедневно">
Свежие заголовки...
</marquee>
Современная реализация с улучшенной доступностью:
<div class="news-ticker"
aria-label="Лента новостей"
data-tooltip="Обновляется ежечасно"
tabindex="0">
<div class="ticker-content">Актуальные события...</div>
</div>
<style>
[data-tooltip] {
position: relative;
}
[data-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>
Ключевые улучшения:
| Аспект | Устаревший title | Современный подход |
|---|---|---|
| Доступность | Ограниченная | ARIA-атрибуты + семантика |
| Кастомизация | Нет | Полный контроль стилей |
| Поведение | Зависит от браузера | Программно управляемое |
Рекомендации по реализации:
- Используйте
aria-labelдля скринридеров - Для сложных подсказок применяйте JavaScript-библиотеки
- Сочетайте с
tabindexдля клавиатурной навигации - Проверяйте контрастность кастомных подсказок
Ограничения устаревшего подхода:
- Нет контроля над стилизацией
- Ограниченное содержание (только текст)
- Проблемы на мобильных устройствах
- Отсутствие анимации появления
Примечание: Для профессиональных решений рассмотрите библиотеки типа Tippy.js, которые предоставляют богатые возможности для tooltip'ов с полной кастомизацией и доступностью.