Добавление всплывающего текста без JavaScript: CSS решения

Быстрый ответ

Для создания простого всплывающего окна с текстом, необходимо добавить в HTML атрибут title:

<span title="Рейтинг: 1500">Пользователь</span>

Чтобы создать пользовательскую подсказку, следует использовать в CSS псевдоэлемент ::after:

.user-rep::after {
  content: attr(data-rep);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.user-rep:hover::after {
  visibility: visible;
  opacity: 1;
}

<span class="user-rep" data-rep="Рейтинг: 1500">Пользователь</span>

Здесь функция attr() в CSS извлекает текст для подсказки из атрибута data-rep и отображает его, когда пользователь наводит курсор.

Настройка расположения подсказки

Для корректного расположения всплывающего текста используется CSS:

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div class="tooltip">Наведите на меня
  <span class="tooltiptext">Текст подсказки</span>
</div>

Визуально привлекательные подсказки с семантикой HTML

Чтобы повысить важность контента, используйте тег <abbr> для сокращений с автоматической подсказкой:

<abbr title="Язык разметки гипертекста">HTML</abbr>

Кастомное оформление: CSS, добавляющий индивидуальность подсказкам

Вы можете придать подсказкам уникальные цвета, отличающиеся от стандартной черно-белой палитры:

.tooltip .tooltiptext {
  background-color: #f2f2f2;
  color: #2a2a2a;
}

Примечание

Воспринимайте подсказки как стикеры с заметками, которые всплывают при наведении курсора:

<a href="#" title="Здесь важная информация!">🔗 Наведите на меня!</a>

При наведении:

До:            [🔗]
При наведении: [🔗💬]

В этом случае атрибут title 🏷️ предоставляет полезный сниппет информации без единой строчки JavaScript! 🚀

Завершение

Обеспечение доступности

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

<button aria-label="Удалить сообщение" title="Удалить">
  <img src="delete-icon.png" alt="">
</button>

Подробнее об этом расскажет наш спикер на видео

Многострочные подсказки

Если для подсказки требуется несколько строк, используйте переносы в CSS:

.tooltip .tooltiptext {
  white-space: pre-line;
}

<span class="tooltiptext">
  Узнайте подробности здесь! \A Важное уведомление на второй строке!
</span>

Решение для избежания обрезания подсказки

Если подсказка обрезается по краям окна, сделайте ее видимой всегда:

.tooltip .tooltiptext {
  overflow: visible;
}

Интерактивные подсказки

Даже без JavaScript можно сделать подсказки интерактивными, применив в CSS псевдокласс :active:

.tooltip:active .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Полезные материалы

1. CSS Tooltip – Как создать подсказки с применением только CSS и HTML.
2. Псевдоэлементы – CSS: Каскадные таблицы стилей | MDN – Полная информация про псевдоэлементы в CSS.
3. Селектор CSS :hover – Сведения о селекторе :hover в CSS.
4. Тег HTML abbr – Использование тега <abbr>, вызывающего подсказки, в HTML.
5. Глобальный атрибут title в HTML – Подробное руководство по атрибуту title для разработчиков, желающих добавить текст при наведении.
6. Последние вопросы 'tooltip+html+css' – Stack Overflow — Актуальные вопросы о создании подсказок с использованием HTML и CSS на Stack Overflow.