Атрибут title тега <select>
Описание
Атрибут title добавляет всплывающую подсказку (tooltip) к элементу <select>, которая появляется при наведении курсора. Подсказка часто используется для пояснения назначения выпадающего списка или его отдельных опций.
Пример использования:
<select title="Выберите вашу страну из списка">
<option title="Российская Федерация">Россия</option>
<option title="Соединённые Штаты Америки">США</option>
</select>
Основные особенности:
- Доступность: Подсказки читаются скринридерами
- Многострочность: Поддерживает переносы строк через
\n - Визуализация: Внешний вид зависит от браузера и ОС
- Время появления: Обычно 1-2 секунды задержки
Рекомендации по использованию:
| Ситуация | Пример |
|---|---|
| Пояснение сложного выбора | title="Выберите основной язык интерфейса" |
| Дополнительная информация | title="Сортировка от новых к старым" |
| Технические детали | title="Формат: ISO 8601 (YYYY-MM-DD)" |
Пример с многострочной подсказкой:
<select title="Выберите валюту:\nUSD - доллар США\nEUR - евро\nRUB - российский рубль">
<option>USD</option>
<option>EUR</option>
<option>RUB</option>
</select>
Ограничения и проблемы:
- Не работает на сенсорных устройствах (нет hover-состояния)
- Нельзя стилизовать стандартными средствами CSS
- Избыточное использование раздражает пользователей
- В некоторых браузерах обрезает длинный текст
Альтернативные решения:
<style>
.custom-tooltip {
position: relative;
display: inline-block;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
top: 100%;
background: #333;
color: white;
padding: 5px;
border-radius: 3px;
white-space: pre-line;
z-index: 100;
}
</style>
<div class="custom-tooltip" data-tooltip="Кастомная подсказка\nС переносами строк">
<select>
<option>Вариант с CSS-подсказкой</option>
</select>
</div>
SEO рекомендации:
Хотя поисковые системы учитывают текст в title, не стоит использовать его для ключевых слов. Основной контент должен находиться в видимой части страницы.