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