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

Описание

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

Пример использования:
<details> <summary title="Нажмите для раскрытия содержимого"> Информация о продукте </summary> <p>Подробное описание продукта...</p> </details>

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

  • Подсказка появляется после небольшой задержки при наведении
  • Исчезает при перемещении курсора или через несколько секунд
  • Поддерживается всеми современными браузерами
  • Может содержать только текст (HTML-разметка не интерпретируется)

Рекомендации по содержанию:

Тип информации Пример Когда использовать
Пояснение функции "Нажмите для просмотра деталей" Для неочевидных интерактивных элементов
Дополнительное описание "Основные характеристики продукта" Когда заголовок слишком краткий
Технические детали "Обновлено: 15.06.2023" Для второстепенной, но полезной информации

Пример с важной информацией:

<details> <summary title="Требуется авторизация для просмотра"> Персональные данные </summary> <p>Ваша личная информация...</p> </details>

Рекомендации:

  • Делайте подсказки краткими и информативными
  • Избегайте очевидных пояснений ("Нажмите здесь")
  • Используйте для неочевидных или сложных элементов
  • Проверяйте отображение на разных устройствах

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

  • Недоступен на сенсорных устройствах (без long-press)
  • Может конфликтовать с кастомными tooltip-библиотеками
  • Длинный текст может плохо отображаться на маленьких экранах
  • Не поддерживает форматирование текста

Пример с несколькими элементами:

<details> <summary title="Основные настройки профиля"> Настройки </summary> <ul> <li title="Изменение имени и фамилии">Профиль</li> <li title="Настройка уведомлений">Уведомления</li> <li title="Параметры безопасности">Безопасность</li> </ul> </details>

Доступность:

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

Примечание: Для более сложных и стилизованных подсказок рассмотрите использование CSS-решений или JavaScript-библиотек типа Tippy.js.