Всплывающая подсказка

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

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

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

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

<p data-tooltip="Всплывающая подсказка">…</p>

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

[data-tooltip]::after {
  content: attr(data-tooltip); /* Выводим текст */
}

Цвет фона, текста, размеры и положение подсказки также задаются в ::after. Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

[data-tooltip]::after {
  opacity: 0;
}

Там же устанавливаем и время перехода с помощью свойства transition.

[data-tooltip]::after {
  transition: 1s;
}

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none.

[data-tooltip]::after {
  pointer-events: none;
}

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

[data-tooltip]:hover::after {
  opacity: 1;
}

Сюда же можно добавить и другие свойства, вроде left и top. Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.

Пример 1. Создание подсказки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:hover</title> <style> [data-tooltip] { position: relative; /* Относительное позиционирование */ } [data-tooltip]::after { content: attr(data-tooltip); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ width: 300px; /* Ширина подсказки */ left: 0; top: 0; /* Положение подсказки */ background: #3989c9; /* Синий цвет фона */ color: #fff; /* Цвет текста */ padding: 0.5em; /* Поля вокруг текста */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */ pointer-events: none; /* Подсказка */ opacity: 0; /* Подсказка невидима */ transition: 1s; /* Время появления подсказки */ } [data-tooltip]:hover::after { opacity: 1; /* Показываем подсказку */ top: 2em; /* Положение подсказки */ } </style> </head> <body> <p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном..."> Наведи сюда курсор.</p> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты