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

Описание

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

Пример использования:
<details title="Нажмите для просмотра технических требований"> <summary>Технические характеристики</summary> <ul> <li>Процессор: 2.5 GHz</li> <li>Память: 8 GB RAM</li> </ul> </details>

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

Характеристика Описание
Отображение Всплывающая подсказка при наведении
Доступность Частично доступна для скринридеров
Содержимое Только текст (HTML не интерпретируется)
Длина Ограничена (обычно 200-300 символов)

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

  • Используйте для кратких пояснений (до 150 символов)
  • Избегайте дублирования информации из <summary>
  • Не помещайте важную информацию - не все пользователи увидят подсказку
  • Для длинных описаний используйте атрибут aria-describedby

Пример с динамическим title:

<details id="dynamic-title-example"> <summary>Статистика использования</summary> <p>Данные за последний месяц...</p> </details> <script> // Динамическое обновление title document.getElementById('dynamic-title-example').title = 'Обновлено: ' + new Date().toLocaleDateString(); </script>

Доступность (a11y):

  • Дублируйте важную информацию в видимом тексте
  • Для сложных подсказок используйте aria-label или aria-describedby
  • Тестируйте со скринридерами (NVDA, VoiceOver)
  • Учитывайте, что на сенсорных устройствах подсказки не работают

Пример с улучшенной доступностью:

<details aria-labelledby="details-title" aria-describedby="details-desc"> <summary id="details-title">Настройки конфиденциальности</summary> <div id="details-desc" hidden>Раздел содержит параметры приватности вашего профиля</div> <!-- Содержимое раздела --> </details>

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