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

Описание

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

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

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

  • Подсказка появляется при наведении курсора (hover)
  • Исчезает через несколько секунд или при уходе курсора
  • Поддерживает многострочный текст (используйте переносы строк)
  • Отображается поверх других элементов

Примеры разных подсказок:

<p> <span title="Простое пояснение">Пример 1</span> | <span title="Многострочная подсказка с переносами строк">Пример 2</span> | <span title="HTML-теги не интерпретируются">Пример 3</span> </p>

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

  • Используйте для пояснения сложных терминов
  • Добавляйте подсказки к сокращениям и аббревиатурам
  • Делайте текст кратким и информативным
  • Для важной информации используйте видимые элементы

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

  • Недоступен на мобильных устройствах (нет hover)
  • HTML-теги отображаются как текст
  • Внешний вид зависит от браузера
  • Нельзя стилизовать стандартную подсказку

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

  • Кастомные тултипы (через CSS+JS) - для стилизации
  • Атрибут aria-label - для доступности
  • Видимые пояснения - для важной информации

Дополнительная информация:

  • Для переноса строк используйте или &#10;
  • Подсказки улучшают юзабилити, но не должны быть обязательными
  • Важная информация не должна быть только в подсказке

Примечание: Для создания стилизованных подсказок с анимациями рассмотрите библиотеки типа Tippy.js или Popper.js.