Атрибут title тега <aside>
Описание
Атрибут title для тега <aside> задает всплывающую подсказку (tooltip), которая появляется при наведении курсора на элемент. Это текстовое описание содержимого боковой панели.
<aside title="Дополнительная информация о продукте">
<h3>Характеристики</h3>
<p>Вес: 1.5 кг</p>
</aside>
Особенности работы:
| Платформа | Поведение | Время появления |
|---|---|---|
| Десктопные браузеры | Подсказка появляется при наведении | Обычно 1-2 секунды |
| Мобильные устройства | Часто недоступен | - |
| Скринридеры | Может озвучиваться | Немедленно |
Рекомендации по использованию:
- Важно: Не используйте для критической информации
- Длина должна быть 60-120 символов
- Избегайте дублирования видимого текста
- Для важного контента используйте
aria-labelили видимые элементы
<aside aria-labelledby="aside-title">
<h3 id="aside-title">Дополнительная информация</h3>
<p>Подробные характеристики продукта...</p>
</aside>
Лучшие практики:
<!-- Хороший пример -->
<aside title="Статистика за 2023 год (обновляется ежедневно)">
<h3>Аналитика</h3>
<!-- контент -->
</aside>
<!-- Плохой пример -->
<aside title="Нажмите здесь для подробностей">
<h3>Подробности</h3>
<!-- контент -->
</aside>
Ограничения: Атрибут title ненадежен для мобильных устройств и не должен использоваться для важной информации.
Альтернативы для разных случаев:
| Цель | Лучшая альтернатива |
|---|---|
| Описание элемента | aria-describedby |
| Метка для скринридеров | aria-label |
| Постоянно видимая подсказка | Элемент <div class="tooltip"> |
Совет: Для сложных подсказок используйте JavaScript-библиотеки типа Tippy.js или Popper.js.
Примечание: В некоторых браузерах title может обрезаться, если не помещается в одну строку.