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

Всплывающие подсказки на 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 со свойствами, общими для каждого вида подсказок. Скачать файлы с кодом.

Добавить комментарий