Атрибут title тега <li>

Описание

Атрибут title добавляет всплывающую подсказку к элементу <li>, которая появляется при наведении курсора. Подсказка может содержать дополнительную информацию о пункте списка.

Пример использования:
<ul> <li title="Основная страница сайта">Главная</li> <li title="Контакты поддержки: support@example.com">О нас</li> <li title="Телефон: +7 (123) 456-78-90">Контакты</li> </ul>

Особенности работы:

Параметр Описание Примечание
Отображение Всплывающая подсказка при наведении Зависит от браузера и ОС
Содержимое Текстовая информация HTML-теги не интерпретируются
Доступность Частично доступен для скринридеров Не заменяет ARIA-атрибуты

Совместное использование с CSS:

<style> li[title] { border-bottom: 1px dotted #666; cursor: help; } </style> <ul> <li title="Дополнительная информация появится при наведении"> Пункт с визуальным указателем подсказки </li> </ul>

Рекомендации по использованию:

  • Используйте для кратких пояснений (не более 1-2 строк)
  • Избегайте важной информации только в title - не все пользователи увидят
  • Для сложного контента используйте специальные тултип-компоненты
  • Сочетайте с ARIA-атрибутами для лучшей доступности

Ограничения:

  • Не поддерживает форматирование текста
  • Время появления и стили зависят от браузера
  • На мобильных устройствах может не работать
  • Не заменяет текст для SEO - содержимое не индексируется

Пример доступной реализации:

<ul> <li title="Описание услуги" aria-describedby="service1-desc"> Услуга 1 <span id="service1-desc" hidden>Полное описание услуги...</span> </li> </ul>

Примечание: Хотя атрибут title удобен для простых подсказок, для сложных интерфейсов рекомендуются специализированные библиотеки тултипов, которые обеспечивают лучший контроль над отображением и доступностью.