Підказки css3

Відео: Підказки на jQuery

Чи траплялося таке, що необхідно написати якісь пояснення до певного слова, але місця не вистачає? Для цього застосовуються спливаючі підказки, а працюють вони в такий спосіб: при наведенні курсору на певне слово або елемент на сторінці з`являється підказка, в якій даються деякі пояснення. Це дуже зручно використовувати, наприклад, на формі реєстрації, можливо ви вже бачили такі підказки, і в цьому уроці я розповім як створити такі підказки на CSS3 без використання javascript.

Приклад різних спливаючих підказок можна побачити тут:

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

HTML частина

Розглянь на прикладі двох сірих спливаючих підказок, а всі інші зроблені аналогічно:

12345678910

lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisilt;a href="#" class="Tooltip"gt; vulputatelt;spangt; lt;bgt; Темаlt;/bgt; lt;brgt; Це сіра підказка на CSS3.lt;/spangt;lt;/agt; nulla pretium egestas. Aliquam pretium eros conguelt;a href="#" class="Tooltip"gt; ultriceslt;spangt; Це друга сіра підказкаlt;/spangt;lt;/agt; mauris auctor lobortis.lt;/pgt;

Тобто коли ми хочемо додати окремі слова підказку, ми виділяємо його тегом з класом tooltip. А потім всередині беремо в тег то, що хочемо бачити в підказці.

CSS частина

А зараз ставимо стилі. Адже спочатку текст підказки повинен бути захований й з`являтися тільки при наведенні:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

.tooltip{position: relative-background: #eaeaea-cursor: help-display: inline-block-text-decoration: none-color: # 222-outline: none-}.tooltip span{visibility: hidden-position: absolute-bottom: 30px-left: 50%-z-index: 999-width: 230px-margin-left: -127px-padding: 10px-border: 2px solid #ccc-opacity: .9-background-color: #ddd-background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0))-background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0))-background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0))-background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0))-background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0))--moz-border-radius: 4px-border-radius: 4px--moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset--webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset-text-shadow: 0 1px 0 rgba(255,255,255,.4)-}.tooltip: hover{border: 0- / * Для IE6 * /}.tooltip: hover span{visibility: visible-}.tooltip span: before,.tooltip span: after{content: ""-position: absolute-z-index: 1000-bottom: -7px-left: 50%-margin-left: -8px-border-top: 8px solid #ddd-border-left: 8px solid transparent-border-right: 8px solid transparent-border-bottom: 0-}.tooltip span: before{border-top-color: #ccc-bottom: -8px-}