Как добавить всплывающую подсказку к тексту?
Всплывающая подсказка — это небольшой блок с текстом, который появляется при наведении курсора мыши на какой-либо элемент веб-страницы (рис. 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>
Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.
Автор: Влад Мержевич
Источник: webref.ru