В этом уроке мы будем делать красивые всплывающие подскаски, как в Google Analytics, с помощью JQUERY и CSS

Наверное многие из вас , у кого имеется блог или сайт, не раз видели красивые всплывающие
подсказки проверяя, анализируя посещаемость своего сайта или блога, а кто не видел
выглядят они вот так

Сейчас мы попробуем селать что то похожое на то что показано на картинке
Начнем
1. Создаем Html документ
2. Подключаем к нему любую версию Jquery желательно одну из последних скачать вы их сможете здесь.
3. Далее пишем вот такой вот скрипт и вставляем его в документ
01 |
$(document).ready( function (){ //скрипт выполняется приготовности всех DOM элементов |
03 |
$( '[rel=tooltip]' ).bind( 'mouseover' , function (){ //для всех элементов у которых rel равен tootltip при наведениии курсора выполняется функция |
05 |
var theMessage = $( this ).attr( 'content' ); // переменной themessage приравниваем значения поля content |
07 |
<div class= "tooltip" > ' + theMessage + ' </div> |
09 |
').appendTo(' body ').fadeIn(' fast'); //themessage выводим между тегами div с классом tootltip |
10 |
$( this ).bind( 'mousemove' , function (e){ //функция определяет положение мыши и переносит за ним подскаску |
11 |
$( 'div.tooltip' ).css({ |
12 |
'top' : e.pageY - ($( 'div.tooltip' ).height())-10, |
16 |
}).bind( 'mouseout' , function (){ //функция убирает подсказку если мышка не на объекте |
17 |
$( 'div.tooltip' ).fadeOut( 'fast' , function (){ |
Я его вставил в документ между тегами body, вы же можете сохранить его в отдельном файле и подключить в heder’е
4. Также нам нужно создать стили оформления всплывающих подсказок, делается это на Css вот собственно
код его тоже нужно будет подключить к документу
04 |
background-image : url (tip-bg.png); |
05 |
background-position : left center ; |
07 |
padding : 5px 5px 5px 8px ; |
09 |
font-family : Verdana , Geneva, sans-serif ; |
10 |
background-color : #FFFFFF ; |
13 |
border-color : #666666 ; |
5. Создаем пару элемнтов rel=”tooltip”, а в content прописываем текст всплывающей подсказки например вот так:
1 |
< a rel = "tooltip" href = "#" >Любой текст</ a > |
3 |
< span >Текст элемента span</ span > |
4 |
< div >Текст элемента div</ div > |
A вот и демо
http://prootime.ru/css-hint#