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

Описание

Атрибут title для тега <bdi> позволяет добавить всплывающую подсказку к изолированному тексту. Это может быть полезно для:

  • Пояснения значения иностранного текста
  • Добавления транслитерации или перевода
  • Предоставления дополнительной информации о тексте

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

<p> Приветствие: <bdi title="Мир вам (араб.)" dir="rtl" lang="ar"> السلام عليكم </bdi> </p>

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

Сценарий Пример
Перевод title="Спасибо (иврит)"
Транслитерация title="Ahlan bik (араб. - Добро пожаловать)"
Пояснение title="Традиционное арабское приветствие"

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

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

Пример с многострочным title:

<bdi title="Иврит: Shalom\nЗначение: Мир, приветствие" dir="rtl" lang="he"> שלום </bdi>

Совет: Для важной информации используйте aria-label или видимые подписи, так как title имеет ограниченную доступность.

Альтернатива для доступности:

<span aria-label="Арабское приветствие: Мир вам"> <bdi dir="rtl" lang="ar">السلام عليكم</bdi> </span>

Лучшие практики:

  • Дублируйте важную информацию другими способами
  • Для RTL-подсказок укажите dir="auto" в контейнере
  • Избегайте длинных текстов в title
  • Проверяйте отображение в разных браузерах