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

Описание

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

Пример использования:
<time datetime="2025-12-31" title="Новогодние праздники"> 31 декабря </time>

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

  • Подсказка появляется при наведении (hover)
  • Поддерживает многострочный текст (через \n)
  • Не отображается на мобильных устройствах при обычном касании
  • Может использоваться для доступности (accessibility)

Примеры использования:

<!-- Подсказка с пояснением --> <time datetime="2025-02-14" title="День Святого Валентина"> 14 февраля </time> <!-- Подсказка с дополнительной информацией --> <time datetime="2025-05-09" title="Начало в 10:00, парад на Красной площади"> День Победы </time>

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

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

Accessibility-совет:

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

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

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

Альтернативы:

Для более сложных подсказок рассмотрите:

  • Кастомные тултипы через CSS/JavaScript
  • ARIA-атрибуты (aria-label, aria-describedby)
  • Отдельные скрытые блоки с дополнительной информацией

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