Русский
Українська
English
Доброго времени суток уважаемый пользователь, сегодня я хотел бы поговорить о том как можно создать всплывающие подсказки в тексте с использованием CSS , ну и создать несколько примеров.
И так что такое "всплывающие подсказки" - это текст или картинка которые отображаются при наведении указателя мыши на ссылку или другой какой то элемент на странице, если в атрибуте title есть ее описание.
Всплывающую подсказку Вы можете применять как для ссылок, так и для любых изображений.
В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:
И выводится она стандартным системным методом при помощи атрибута title, без оформления код ссылки из всплывающей подсказкой выглядит так:
|
1
|
<a title="Всплывающая подсказка" href="http://site.ru/">Ссылка</a>
|
Но как мы уже говорили изначально мы будем делать эти всплывающие подсказки более симпатичными ,и будем использовать код css, сегодня мы постараемся рассмотреть три варианта всплывающих подсказок.
Так как, нет возможности в CSS простого оформления title, потому мы будем добавлять разные атрибуты, писать для них оформление и соответственно добавлять их в код нашей ссылки или изображения, для которого мы делаем красивую всплывающую подсказку.
Вариант всплывающей подсказки первый, в нем мы будем добавлять подсказку на фотографию в самом низу при наведении указателя мыши.
Для выполнения данного действия мы будем использовать два атрибута: image, И для того чтоб наша подсказка работала after и data-text для вывода текста всплывающей подсказки.
Пример стилей CSS для данного варианта всплывающей подсказки:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.image {
display: inline-block;
position: relative;
}
.image:hover::after {
content: attr(data-text); /* Выводим текст всплывающей подсказки*/
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */
color: #fff; /* Цвет текста */
text-align: center; /* Выравниваем текст по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
|
Ну и сам HTML код выглядит так:
|
1
|
<div class="image" data-text="Текст подсказки"><img src="путь к изображению" alt="" /></div>
|
А вот примерно такой результат у нас получится:
Но для ссылок такой вариант всплывающей подсказки не подойдет конечно же ,значить будем использовать немного другие методы вывода нашей подсказки. И в первом методе мы выведем всплывающую подсказку именно над нашей ссылкой.
Пример кода CSS Ниже:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.podskazka{
display: inline;
position: relative;
}
.podskazka:hover:after{
background: #333;
background: rgba(204,102,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
}
.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */
border: solid;
border-color: #cc6600 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
|
А для нашей ссылки с подсказкой делаем такой код:
|
1
|
<a class="podskazka" title="Текст нашей подсказки." href="https://web-stydia.com/">Ссылка</a>
|
Ну и результат у нас получится такой:
Наведи курсор сюда
Ну и последний третий вариант - Выводить нашу всплывающую подсказку будем под ссылкой, в принципе он похож на предыдущий но немного другой дизайн и вывод под ссылкой.
Пример CSS кода:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
.tooltip {
position: relative; /* Делаем элемент родительским для всплывающих подсказок */
cursor: help;
}
.tooltip span {
position: absolute; /* Выводим элемент из потока */
margin-left: -30000px; /* И прячем далеко за краем экрана */
background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/
color: #fafafa; /* Цвет текста */
padding:10px; /* Отступы */
-webkit-border-radius: 5px; /* Закругляем уголки */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.tooltip:hover span { /* При наведении */
margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */
width: 250px; /* Задаем ширину */
z-index: 1000; /* Помещаем на самый верх */
/* Позиционируем относительно родительского блока */
top:30px; /* Отступ сверху */
left:20px; /* Отступ слева */
}
.tooltip span:after{
content: ''; /* Добавили контент */
width:0; /* Спрятали его, превратив в 0 */
height:0;
border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */
border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */
position: absolute; /* Позиционируем относительно родительского блока */
top:-10px;
left:10px;
}
|
Ну и соответственно html-код для ссылки:
|
1
|
<span class="tooltip">Ссылка<span class="classic">Текст всплывающей подсказки</span></span>
|
И результат у Вас должен будет получится как на примере ниже:
Наведи курсор сюдаТекст всплывающей подсказки
Вот мы и рассмотрели три варианта всплывающих подсказок,вроде ничего сложного но наши всплывающие подсказки уже имеют более красивый вид чем изначально, их конечно же в сети намного больше можно найти и это только малая часть примеров, по этому пробуйте и комментируйте.
Нет комментариев
Вы можете оставить комментарий первым.