Атрибут title тега <small>
Описание
Атрибут title добавляет всплывающую подсказку (tooltip) к элементу <small>, которая появляется при наведении курсора. Подсказка часто используется для пояснения сокращений, дополнительной информации или уточнений.
Пример использования:
<small title="Дополнительная пояснительная информация">
Текст с подсказкой
</small>
Основные особенности:
- Доступность: Подсказки читаются скринридерами
- Многострочность: Поддерживает переносы строк через
\n - Визуализация: Внешний вид зависит от браузера и ОС
- Время появления: Обычно 1-2 секунды задержки
Рекомендации по использованию:
| Ситуация | Пример |
|---|---|
| Пояснение сокращений | title="Национальное аэрокосмическое агентство" |
| Дополнительная информация | title="Обновлено 15.11.2025" |
| Юридические оговорки | title="Подробнее см. раздел 5.2 пользовательского соглашения" |
Пример с многострочной подсказкой:
<small title="Первая строка подсказки\nВторая строка с дополнительной информацией">
Текст с многострочной подсказкой
</small>
Ограничения и проблемы:
- Не работает на сенсорных устройствах (нет hover-состояния)
- Нельзя стилизовать стандартными средствами CSS
- Избыточное использование раздражает пользователей
- В некоторых браузерах обрезает длинный текст
Доступность (a11y):
<small title="Важное примечание" aria-label="Дополнительное пояснение: Важное примечание">
Текст с подсказкой
</small>
Альтернативные решения:
<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: pre-line;
}
</style>
<small class="custom-tooltip" data-tooltip="Кастомная подсказка\nС переносами строк">
Текст с CSS-подсказкой
</small>