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

Описание

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

Пример использования:
<p> В этом предложении <b title="Этот термин означает важное понятие">ключевой термин</b> имеет всплывающую подсказку. </p>

Основные характеристики:

Параметр Описание Примечание
Отображение Всплывающая подсказка при наведении Задержка ~1-2 секунды
Доступность Частично доступен для скринридеров Не заменяет ARIA-атрибуты
Мобильные устройства Часто недоступен Нет события hover

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

  • Краткие пояснения (до 60-80 символов)
  • Дополнительная информация, не критичная для понимания
  • Определения терминов и аббревиатур
  • Не используйте для важной информации
Пример с терминологией:
<p> <b title="HyperText Markup Language">HTML</b> - стандартный язык разметки документов. </p>

JavaScript доступ к title:

const boldElement = document.querySelector('b'); // Получить текущее значение console.log('Текущая подсказка:', boldElement.title); // Изменить подсказку boldElement.title = 'Новое пояснение термина'; // Удалить подсказку boldElement.removeAttribute('title');

Ограничения и проблемы:

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

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

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

<!-- Способ 1: Видимый текст с пояснением --> <p> <b>HTML</b> <small>(HyperText Markup Language)</small> - язык разметки. </p> <!-- Способ 2: Кастомный tooltip через CSS/JS --> <span class="tooltip"> <b>CSS</b> <span class="tooltip-text">Cascading Style Sheets</span> </span> <style> .tooltip { position: relative; } .tooltip-text { visibility: hidden; position: absolute; /* Стилизация tooltip'а */ } .tooltip:hover .tooltip-text { visibility: visible; } </style>

Совет: Для важных пояснений используйте видимые элементы или специализированные библиотеки tooltip'ов (Tippy.js, Popper.js).

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