Русский
Українська
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>
|
І результат у Вас повинен буде вийде як на прикладі нижче:
Наведи курсор сюдиТекст спливаючої підказки
Ось ми і розглянули три варіанти спливаючих підказок, начебто нічого складного але наші підказки вже мають більш красивий вигляд ніж спочатку, їх звичайно ж в мережі набагато більше можна знайти і це тільки мала частина прикладів, тому пробуйте і коментуйте.
Немає коментарів
Ви можете залишити коментар першим.