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

Описание

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

Пример использования:
<cite title="Из романа 'Мастер и Маргарита', 1940 год"> «Рукописи не горят» </cite>

Основные сценарии применения:

Сценарий Пример
Указание источника title="Из книги '1984', Джордж Оруэлл"
Контекст цитаты title="Сказано во время выступления в 1963 году"
Дополнительное пояснение title="Перевод с древнегреческого оригинала"

Технические особенности:

  • Подсказка появляется после 1-2 секунд наведения
  • Не поддерживает HTML-разметку внутри (только plain text)
  • На мобильных устройствах может не отображаться
  • Максимальная длина зависит от браузера (обычно 500-600 символов)

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

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

Пример с CSS-стилизацией:

<style> cite[title] { border-bottom: 1px dotted #666; cursor: help; } </style> <cite title="Автор: Уильям Шекспир, пьеса 'Гамлет'"> «Быть или не быть» </cite>

Доступность (a11y):

  • Содержимое title озвучивается скринридерами
  • Не заменяет альтернативный текст для изображений
  • Для важной информации используйте видимые элементы

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

  • Невозможно контролировать позиционирование или стиль
  • Нет анимации появления/исчезновения
  • Нельзя добавить интерактивные элементы

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

<div class="tooltip"> <cite>«Знание — сила»</cite> <span class="tooltip-text">Фрэнсис Бэкон, 1597 год</span> </div> <style> .tooltip { position: relative; } .tooltip-text { visibility: hidden; position: absolute; /* ... */ } .tooltip:hover .tooltip-text { visibility: visible; } </style>

Примечание: Хотя атрибут title полезен для быстрых подсказок, для сложных интерактивных элементов рассмотрите использование кастомных тултипов на CSS/JavaScript, особенно если информация важна для понимания контента.