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

Описание

Атрибут title для тега <data> позволяет добавить всплывающую подсказку, которая появляется при наведении курсора на элемент. Это полезно для предоставления дополнительной информации о машинно-читаемом значении.

Пример использования:
<p> Статус заказа: <data value="shipped" title="Товар был отправлен 15 мая 2023"> Отправлен </data> </p>

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

Аспект Поведение
Отображение Всплывающая подсказка при наведении (зависит от браузера)
Доступность Доступен скринридерам как дополнительное описание
Форматирование Только простой текст (HTML-разметка не интерпретируется)
Мобильные устройства Может не отображаться при касании

Практические примеры:

1. Пояснение кода:
<data value="HTTP/2" title="Протокол передачи гипертекста версии 2"> HTTP/2 </data>
2. Дополнительная информация:
<data value="15%" title="Средний показатель по отрасли: 20%"> 15% ROI </data>

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

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

Альтернативы для сложных случаев:

<!-- 1. Использование aria-label --> <data value="42" aria-label="Ответ на главный вопрос жизни, вселенной и всего такого"> 42 </data> <!-- 2. Кастомные тултипы через CSS/JS --> <span class="tooltip" data-tooltip="Подробное многострочное объяснение..."> <data value="complex_value">Сложное значение</data> </span>

Совместимость с другими атрибутами:

<data value="temp_c:25" title="Текущая температура" data-unit="°C" data-location="Москва"> 25°C </data>

Важные замечания:

  • Не заменяет атрибут value - они служат разным целям
  • Для мобильных устройств рассмотрите альтернативные способы отображения подсказок
  • Избегайте использования для критически важной информации
  • Может быть недоступен при некоторых настройках доступности
  • Поддерживается всеми современными браузерами

Примечание: Атрибут title является универсальным для всех HTML-элементов и особенно полезен с тегом <data>, так как позволяет добавить человеко-читаемое пояснение к машинно-читаемому значению. Однако для сложных интерактивных подсказок лучше использовать специализированные решения.