Всплывающие подсказки на CSS
Всплывающие подсказки выполняют роль ненавязчивого знатока на сайте. Если вам нужна помощь, вы наводите курсор мыши на непонятную фразу, и рядом появляется всплывающая подсказка с кратким ответом на вопросительный взгляд читателя.
Такие подсказки помогают пользователю подружиться с интерфейсом ресурса, разобраться с терминологией или узнать перевод иностранного слова. Создать всплывающие подсказки на CSS довольно просто. Предлагаю немного потренироваться и создать один интересный вариант. Однако для начала разберем основной принцип создания всплывающих подсказок.
Базовый код для создания всплывающих подсказок на CSS
1. Для начала добавим в HTML-файл ссылку, рядом с которой будет появляться подсказка:
<a href="#" class="tooltip" data-info="А вот и подсказка!">Нужна подсказка</a>
Мы создали ссылку, с классом «tooltip» и атрибутом data-info.
Разберем подробнее:- Созданной ссылке я присвоила класс «tooltip», чтобы позже в CSS файле прописать для этого класса эффект появления подсказки при наведении курсора мыши.
- Также добавила атрибут data-info с содержанием «А вот и подсказка!». Сейчас данный текст спрятан от глаз пользователей, как и любой data-* атрибут CSS. Чтобы вывести содержание такого атрибута на экран, нужно к его родительскому элементу применить свойство content со значением attr. Этим мы и займемся в CSS-файле!
Больше в HTML-файл мы добавлять ничего не будем. Предлагаю приступить к редактированию CSS-файла.
2. В html-файле мы для ссылки задавали атрибут data-info, в котором хранится подсказка. Давайте выведем подсказку на экран рядом со ссылкой. Для этого используем псевдоэлемент :after
.tooltip:after {
content: attr(data-info);
}
Смотрим, что получилось:
Теперь на нашей странице прямо рядом со ссылкой выводится подсказка. Неказистенькая такая, и совсем не реагирует на курсор мыши… Спокойно! Все идет по плану: красоту мы будем наводить после. А сейчас спрячем подсказку от посторонних взглядов, и будем показывать только самым любопытным, и только при наведении курсора на ссылку. Для этого воспользуемся помощью псевдокласса :hover и шапкой-невидимкой от visibility: hidden. Свойство visibility: hidden мы добавим в уже созданный селектор:
.tooltip:after{
content: attr(data-info);
visibility: hidden;
}
А теперь сделаем так, чтобы подсказка появлялась при наведении курсора мыши. Для этого пропишем свойство visibility:visible для селектора .tooltip:hover:after
.tooltip:hover:after{
visibility: visible;
}
Проверяем: подсказка появляется при наведении курсора мыши на ссылку!
Развернуть базовый HTML-код для всплывающей подсказки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающие подсказки</title>
<link rel="stylesheet" href="tooltip.css" type="text/css">
</head>
<body>
<a href="#" class="tooltip" data-info="А вот и подсказка!">
Нужна подсказка
</a>
</body>
</html>
Развернуть базовый CSS-код для всплывающей подсказки
.tooltip:after{
content: attr(data-info);
visibility: hidden;
}
.tooltip:hover:after{
visibility: visible;
}
Однако, сейчас подсказка выглядит непрезентабельно, нужно поработать над дизайном, да и рассмотреть варианты позиционирования подсказки не помещает. C позиционирования мы и начнем.
Меняем положение всплывающей подсказки
Для того, чтобы изменить положение подсказки, определим свойство position: absolute и зададим позицию относительно родителя подсказки. А родителю подсказки, то есть ссылке с классом .tooltip зададим position: relative. Для расположения подсказки выше ссылки, будем определять положение нижней границы подсказки, т. е. bottom. В этом случае, если подсказка будет занимать несколько строк по высоте, то расти она будет вверх, не загораживая ссылку. И напротив, чтобы подсказка выводилась ниже ссылки, определим свойство top. Для горизонтального расположения подсказки будем определять свойства: left, right и bottom. Кроме того, предлагаю сразу определить минимальную ширину подсказки, например, 180px. Дополним этими свойствами селектор .tooltip:after
.tooltip {
position: relative;
}
.tooltip:after {
position: absolute;
left: 0;
bottom: 130%;
min-width:180px;
content: attr(data-info);
visibility: hidden;
}
Слева от ссылки
.tooltip-19042{
position:relative;
}
.tooltip:after{
position: absolute;
right: 100%;
bottom: -30%;
min-width:180px;
margin-right: 10px;
content: attr(data-info);
visibility: hidden;
}
.tooltip {
position: relative;
}
.tooltip:after{
position: absolute;
left: 0;
top: 130%;
min-width:180px;
content: attr(data-info);
visibility: hidden;
}
.tooltip-19042{
position:relative;
}
.tooltip:after{
position: absolute;
left: 100%;
bottom: -30%;
min-width:180px;
margin-left: 10px;
content: attr(data-info);
visibility: hidden;
}
Для горизонтальных подсказок мы дополнительно добавили magrin для отступа от ссылки .
Стилизуем подсказку
Пришло время привести внешний вид подсказки в приемлемый вид! Для этого в любимый нами селектор .tooltip:after добавим свойства:
min-width:180px; font-size: 16px; background-color: rgba(11,11,11,0.75); color: #fff; padding: 13px; border-radius: 6px;
После этого, список свойств селектора .tooltip:after для подсказки сверху в CSS-файле будет выглядеть так:
.tooltip:after {
position: absolute;
left: 0;
bottom: 130%;
min-width:180px;
content: attr(data-info);
visibility: hidden;
min-width:180px;
font-size: 16px;
background-color: rgba(61,61,61,0.95);
color: #fff;
padding: 13px;
border-radius: 6px;
}
Добавляем треугольник к подсказке
Остается лишь добавить треугольничек, указывающий на принадлежности подсказки к ссылке. Для этого будем использовать псевдоэлемент :before. Таким образом, перед ссылкой мы расположим треугольник(с помощью :before), а после ссылки уже расположили подсказку (с помощью :after). Аналогично селектору .tooltip:after зададим селектору .tooltip:before свойство visibility:hidden, которое при наведении курсора мыши сменится на visibility: visible. Для этого дополним существующий CSS-файл следующим кодом:
.tooltip:before{
content: '';
border: 9px solid transparent;
border-top: 9px solid rgba(61,61,61,0.95);
position: absolute;
left: 50%;
bottom: 60%;
margin-left: 10px;
visibility: hidden;
}
.tooltip:hover:before {
visibility: visible;
}
.tooltip:before{
content: '';
border: 9px solid transparent;
border-left: 9px solid rgba(61,61,61,0.95);
position: absolute;
left: 0;
margin-left: -10px;
bottom: 50%;
visibility: hidden;
}
.tooltip:hover:before {
visibility: visible;
}
.tooltip:before{
content: '';
border: 9px solid transparent;
border-bottom: 9px solid rgba(61,61,61,0.95);
position: absolute;
left: 50%;
top: 60%;
margin-left: 10px;
visibility: hidden;
}
.tooltip:hover:before {
visibility: visible;
}
.tooltip:before{
content: '';
border: 9px solid transparent;
border-right: 9px solid rgba(61,61,61,0.95);
position: absolute;
right: 0;
margin-right: -10px;
bottom: 50%;
visibility: hidden;
}
.tooltip:hover:before {
visibility: visible;
}
Поздравляю! Код всплывающей подсказки создан! Проверить работоспособность подсказок можно по ссылке: «Демонстрация всплывающих подсказок«. А по ссылке ниже я выложу коды файлов с примерами подсказок, всплывающих в разных положениях: ниже, выше, левее и правее ссылки. Соответственно, в HTML-файле каждой из таких ссылок присвоен говорящий класс: tooltip-bottom, tooltip-top, tooltip-left, tooltip-right, а также класс tooltip со свойствами, общими для каждого вида подсказок. Скачать файлы с кодом.