Атрибут title тега <i>
Описание
Атрибут title добавляет всплывающую подсказку к элементу <i>, которая появляется при наведении курсора. Это полезно для пояснения значения иконок или специального текста.
<i class="fa fa-info-circle" title="Дополнительная информация"></i>
<i title="Этот текст будет показан при наведении">Наведи на меня</i>
Особенности отображения:
| Платформа | Поведение | Ограничения |
|---|---|---|
| Десктопные браузеры | Всплывающая подсказка при наведении | Задержка ~1 секунда |
| Мобильные устройства | Часто не отображается | Нет реакции на касание |
| Скринридеры | Могут озвучивать | Не всегда надежно |
Рекомендации по содержимому:
<!-- Хороший пример: кратко и понятно -->
<i class="fa fa-trash" title="Удалить элемент"></i>
<!-- Плохой пример: избыточно -->
<i title="Это иконка корзины, нажмите чтобы удалить выбранный элемент из системы">🗑️</i>
Альтернативы для лучшего UX:
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 100;
}
</style>
<i class="custom-tooltip" data-tooltip="Кастомная подсказка">💡</i>
Рекомендации:
- Используйте для:
- Пояснения значения иконок
- Дополнительной информации
- Доступных tooltip'ов
- Избегайте:
- Дублирования видимого текста
- Слишком длинных текстов
- Использования для критически важной информации
- Для важного контента используйте видимые подсказки
Примечание: Хотя атрибут title прост в использовании, для профессиональных интерфейсов рассмотрите специализированные библиотеки тултипов, которые предлагают больше контроля над отображением и позиционированием.