Оформлення спливаючих підказок - спливаючі підказки css

Відео: Підказки за допомогою CSS

Оригінальне оформлення спливаючих підказок

Залишимо ненадовго навчання технології CSS3 і подивимося невеликий набір оригінально оформлених спливаючих підказок для сайту. Адже спливаючі підказки можуть значно скоротити використовувану область на сайті, а точніше місце. Їх також зручно показувати при реєстрації людини на сайті. Тобто людина може підвести Залишаючи миші до певного слова і йому здасться підказка. А як же ж гарно і елегантно оформити ці підказки ми розглянемо в цій статті.

Оригінальні приклади оформлення спливаючих підказок дивіться нижче:

Подивитися прімерСкачать

Також хочу звернути вашу увагу на наступні статті, де також є спливаючі підказки:

CSS анімовані підказки
Красива підказка при натисканні
Підказки CSS3

Подивимося докладніше | Оформлення спливаючих підказок

HTML частина

Давайте розглянемо на прикладі "Блоку".

Для початку між тегами підключаємо файл стилів:

1	lt;link rel="Stylesheet" type="Text / css" href="Css / tooltip-box.css" /gt;

Відео: Уроки по Bootstrap 3 | # 21 Підказки та спливаючі вікна

де закінчення "-box" (Наприклад, "-flip" або "-line") Це і є той файл стилів, який відповідає обраному ефекту.

Далі, поки що не зовсім зрозумілий, код:

lt;pgt; ... Текст ... lt;span class="Tooltip toolti p-effect-1"gt; lt;span class="Tooltip-item"gt; ключове словоlt;/spangt; lt;span class="Tooltip-content clearfix"gt; lt;span class="Tooltip-text"gt; ... Текст у всливающих вікні ...lt;/spangt; lt;/spangt; lt;/spangt; ... Текст ...lt;/pgt;

На місце ключового слова необхідно розмістити то слово, при наведенні на яке буде з`являтися підказка.

CSS частина

Добре, з HTML розібралися. Але що ж знаходиться в CSS?

Знову ж подивимося для прикладу "Блок":

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

.tooltip {display: inline-position: relative-z-index: 999-}/ * Виділення "ключового слова" * /.tooltip-item {color: # 2fa0ec-cursor: pointer-z-index: 100-position: relative-display: inline-block-font-weight: 700--webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s-transition: background-color 0.3s, color 0.3s, transform 0.3s-}.tooltip: hover .tooltip-item {color: #fff--webkit-transform: translate3d(0,-0.5em,0)-transform: translate3d(0,-0.5em,0)-}/ * Підказка * /.tooltip-content {position: absolute-z-index: 99-width: 360px-left: 50%-margin-left: -180px-bottom: -5px-text-align: left-background: # 2fa0ec-opacity: 0-font-size: 0.75em-line-height: 1.5-padding: 1.5em-color: #fff-border-bottom: 65px solid # 2a3035-cursor: default-pointer-events: none-border-radius: 5px-font-family: `Indie Flower`, cursive-webkit-transform: translate3d(0,-0.5em,0)-transform: translate3d(0,-0.5em,0)--webkit-transition: opacity 0.3s, -webkit-transform 0.3s-transition: opacity 0.3s, transform 0.3s-}.tooltip-content a {color: # 32434f-}.tooltip-text {opacity: 0--webkit-transform: translate3d(0,1.5em,0)-transform: translate3d(0,1.5em,0)--webkit-transition: opacity 0.3s, -webkit-transform 0.3s-transition: opacity 0.3s, transform 0.3s-}.tooltip: hover .tooltip-content,.tooltip: hover .tooltip-text {pointer-events: auto-opacity: 1--webkit-transform: translate3d(0,0,0)-transform: translate3d(0,0,0)-}