Как добавить всплывающую подсказку к тексту?

Всплывающая подсказка — это небольшой блок с текстом, который появляется при наведении курсора мыши на какой-либо элемент веб-страницы (рис. 1). Подсказка чаще всего используется для вывода дополнительной информации об элементе, на который указывает курсор. Как только курсор убирается с элемента, исчезает и сама подсказка.

Вид всплывающей подсказки

Рис. 1. Вид всплывающей подсказки

Самый простой способ сделать такую подсказку — это добавить к нужному элементу атрибут title с желаемым текстом (пример 1).

Пример 1. Использование атрибута title

<p><abbr title="Диалектический материализм">Диамат</abbr> — материалистическая интерпретация диалектики Гегеля.</p>

В данном примере используется элемент <abbr> с атрибутом title, в котором даётся расшифровка слова.

Атрибут title выводит подсказку, вид которой задаётся браузером, и не может быть изменён через CSS. Чтобы сделать подсказку со своим собственным стилем, надо к элементу добавить пользовательский атрибут (такие атрибуты начинаются на data-, например, data-title) и уже для него задать свой стиль.

Стиль самого элемента определяется с помощью селектора [data-title], он выбирает все те элементы, у которых есть пользовательский атрибут data-title.

Для самого элемента устанавливаем относительное позиционирование через свойство position. Оно нужно, чтобы в дальнейшем управлять положением подсказки относительно текста. Также дополнительно можно поменять вид курсора мыши.

[data-title] {
  position: relative; /* Относительное позиционирование */ 
  cursor: help; /* Меняем курсор на справочный */
}

Вывод подсказки делаем через псевдоэлемент ::after (или ::before, что в данном случае равнозначно), который добавляется к нашему селектору [data-title]. Чтобы вывести текст из значения атрибута, используем свойство content со значением attr(data-title).

[data-title]::after {
  content: attr(data-title); /* Выводим текст из атрибута data-title */
}

Теперь надо настроить положение подсказки и её стиль. Для этого делаем её абсолютно позиционированной, что в сочетании с относительным положением у родителя позволяет настраивать положение псевдоэлемента. К примеру, чтобы вывести подсказку ниже текста ставим ей свойство top со значением 1em.

[data-title]::after {
  content: attr(data-title); /* Выводим текст из атрибута data-title */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; top: 1em; /* Подсказка снизу */
}

Чтобы вывести подсказку выше текста, меняем свойство top на bottom.

[data-title]::after {
  content: attr(data-title); /* Выводим текст из атрибута data-title */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; bottom: 1em; /* Подсказка снизу */
}

Учтите, что если нет свободного места для подсказки, то она может быть выведена за пределами окна браузера.

Осталось задать остальной стиль подсказки (цвет, фон и др.) и спрятать её через свойство opacity.

[data-title]::after {
  content: attr(data-title); /* Выводим текст из атрибута data-title */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; top: 1em; /* Положение подсказки */
  opacity: 0; /* Скрываем подсказку, делая её прозрачной */
}

Для отображения подсказки применяем псевдокласс :hover, добавляя его к нашему селектору. Внутри используем единственное свойство opacity.

[data-title]:hover::after {
  opacity: 1; /* Показываем подсказку */
}

Окончательный под показан в примере 2.

Пример 2. Использование пользовательского атрибута

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Всплывающая подсказка</title> <style> [data-title] { position: relative; /* Относительное позиционирование */ cursor: help; /* Меняем курсор на справочный */ } [data-title]::after { content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Положение подсказки */ opacity: 0; /* Скрываем подсказку, делая её прозрачной */ transition: 0.5s; /* Время появления подсказки */ pointer-events: none; /* Подсказка не реагирует на курсор */ background: rgba(57, 137, 201, 0.9); /* Синий цвет фона */ color: #fff; /* Белый цвет текста */ padding: 0.5em; /* Поля вокруг текста */ } [data-title]:hover::after { opacity: 1; /* Показываем подсказку */ } </style> </head> <body> <p><abbr data-title="Диалектический материализм">Диамат</abbr> — материалистическая интерпретация диалектики Гегеля.</p> </body> </html>

Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.

Текст