Простими підказками на css3 і jquery

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

Підказки на сторінці є дуже корисним її елементом. За допомогою підказок можна скоротити сторінку, а «зайвий» текст винести в підказку, яка спочатку прихована, а з`являється тільки при наведенні. Я писав уже раніше як створити підказки на CSS3, а в цьому уроці ми подивимося як зробити так, щоб спливаючі підказки працювали і в Internet Explorer старих версіях.

Реальний приклад можна побачити тут:

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

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

Підказки CSS3

HTML частина

Спочатку підключимо бібліотеку jQuery (вона нам знадобиться пізніше):

1	lt;script src="Js / jquery-1.js"gt; lt;/scriptgt;

Я зробив топ-10 фільмів в упорядкованому списку, щоб продемонструвати спливаючі підказки:

lt;olgt;lt;ligt;lt;b class="Tooltip" data-tooltip="Виробництво: Росія, 2013"gt; Кур`єр з Раюlt;span class="Tooltip-content"gt; Виробництво: Росія, 2013lt;/spangt; lt;/bgt;lt;/ligt; ....lt;/olgt;

Відео: Установка спливаючих красивих підказок TipTip

Як бачите ми використовуємо спеціальний атрибут HTML5 data-tooltip, який дозволяє миттєво створити підказку. А також далі між тегами знаходиться підказка, яка буде з`являтися в старіших браузерах.

Відео: TIP - спливаючі підказки на чистому CSS

CSS частина

Пропишемо підказці трохи стилів:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

.tooltip {position: relative-display: inline-block-cursor: help-white-space: nowrap-border-bottom: 1px dotted # 777-}.tooltip-content {opacity: 0-visibility: hidden-font: 12px Arial, Helvetica-text-align: center-border-color: #aaa # 555 # 555 #aaa-border-style: solid-border-width: 1px-width: 150px-padding: 15px-position: absolute-bottom: 40px-left: 50%-margin-left: -76px-background-color: #fff-background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)))-background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0))-background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0))-background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0))-background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0))-background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0))--moz-box-shadow: 1px 1px 0 # 555,2px 2px 0 # 555,3px 3px 1px rgba(0, 0, 0, .3),0 1px 0 rgba(255,255,255, .5) inset--webkit-box-shadow: 1px 1px 0 # 555,2px 2px 0 # 555,3px 3px 1px rgba(0, 0, 0, .3),0 1px 0 rgba(255,255,255, .5) inset-box-shadow: 1px 1px 0 # 555,2px 2px 0 # 555,3px 3px 1px rgba(0, 0, 0, .3),0 1px 0	rgba(255,255,255, .5) inset--webkit-transition: bottom .2s ease, opacity .2s ease--moz-transition: bottom .2s ease, opacity .2s ease--ms-transition: bottom .2s ease, opacity .2s ease--o-transition: bottom .2s ease, opacity .2s ease-transition: bottom .2s ease, opacity .2s ease-}.tooltip-content: after,.tooltip-content: before {border-right: 16px solid transparent-border-top: 15px solid #fff-bottom: -15px-content: ""-position: absolute-left: 50%-margin-left: -10px-}.tooltip-content: before {border-right; width: 25px-border-top-color: # 555-border-top-width: 15px-bottom: -15px-}.tooltip: hover .tooltip-content{opacity: 1-visibility: visible-bottom: 30px-}

jQuery частина

І останнє - це трохи коду jQuery:

123456789101112131415

$(document).ready(function(){$(`[Data-tooltip]`).addClass(`Tooltip`)-$(`.tooltip`).each(function() {$(this).append(`` + $(this).attr(`Data-tooltip`) + ``)-})-if ($.browser.msie  $.browser.version.substr(0,1)lt;7){$(`.tooltip`).mouseover(function(){$(this).children(`.tooltip-content`).css(`Visibility`,`Visible`)-}).mouseout(function(){$(this).children(`.tooltip-content`).css(`Visibility`,`Hidden`)-})}})-