Атрибут title тега <code>
Описание
Атрибут title добавляет всплывающую подсказку к элементу <code>, которая появляется при наведении курсора. Это полезно для предоставления дополнительной информации о фрагменте кода без загромождения основного содержимого.
<code title="ES6 синтаксис стрелочной функции">
const sum = (a, b) => a + b;
</code>
Основные сценарии применения:
| Сценарий | Пример |
|---|---|
| Пояснение синтаксиса | title="Деструктуризация массива" |
| Версия языка | title="JavaScript ES2020" |
| Дополнительная документация | title="См. документацию в разделе 4.2" |
| Примеры использования | title="Пример: calculate(5, 3)" |
Технические особенности:
- Подсказка появляется после небольшой задержки (обычно 1-2 секунды)
- Не поддерживает HTML-разметку (только plain text)
- Максимальная длина зависит от браузера (обычно несколько сотен символов)
- На мобильных устройствах может не отображаться
Рекомендации по использованию:
- Делайте подсказки краткими (1-2 предложения)
- Используйте для необязательной, но полезной информации
- Избегайте дублирования содержимого страницы
- Для важной информации используйте видимые элементы
Пример с CSS-стилизацией:
<style>
code[title] {
border-bottom: 1px dotted #666;
cursor: help;
}
</style>
<code title="Асинхронная функция с await">
async function fetchData() {...}
</code>
Доступность:
- Содержимое title озвучивается скринридерами
- Не заменяет альтернативный текст для изображений
- Для важной информации используйте видимые элементы
Ограничения:
- Невозможно контролировать позиционирование или стиль подсказки
- Нет анимации появления/исчезновения
- Нельзя добавить интерактивные элементы
Альтернативы для сложных случаев:
<div class="code-tooltip">
<code>const PI = 3.14;</code>
<span class="tooltip-text">
Математическая константа, отношение длины окружности к диаметру
</span>
</div>
<style>
.code-tooltip { position: relative; }
.tooltip-text {
visibility: hidden;
width: 200px;
background-color: #333;
color: #fff;
text-align: center;
padding: 5px;
position: absolute;
z-index: 1;
}
.code-tooltip:hover .tooltip-text { visibility: visible; }
</style>
Примечание: Хотя атрибут title удобен для быстрых подсказок, для сложных объяснений кода или интерактивных элементов рассмотрите использование специализированных решений на CSS/JavaScript, таких как кастомные тултипы или поповеры.