Красивые всплывающие подсказки Jquery Css

от ·Комментарии к записи Красивые всплывающие подсказки Jquery Css отключены

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


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

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

выглядят они вот так

Сейчас мы попробуем селать что то похожое на то что показано на картинке

Начнем

1. Создаем Html документ

2. Подключаем к нему любую версию Jquery желательно одну из последних скачать вы их сможете здесь.

3. Далее пишем вот такой вот скрипт и вставляем его в документ

01 $(document).ready(function(){ //скрипт выполняется приготовности всех DOM элементов
02
03 $('[rel=tooltip]').bind('mouseover', function(){ //для всех элементов у которых rel равен tootltip при наведениии курсора выполняется функция
04
05 var theMessage = $(this).attr('content');// переменной themessage приравниваем значения поля content
06 $('
07 <div class="tooltip">' + theMessage + '</div>
08
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,
13 'left': e.pageX + 25
14 });
15 });
16 }).bind('mouseout', function(){ //функция убирает подсказку если мышка не на объекте
17 $('div.tooltip').fadeOut('fast', function(){
18 $(this).remove();
19 });
20 });
21 });

Я его вставил в документ между тегами body, вы же можете сохранить его в отдельном файле и подключить в heder’е

4. Также нам нужно создать стили оформления всплывающих подсказок, делается это на Css вот собственно

код его тоже нужно будет подключить к документу

01 .tooltip{
02 position:absolute;
03 width:250px;
04 background-image:url(tip-bg.png);
05 background-position:left center;
06 color:#333333;
07 padding:5px 5px 5px 8px;
08 font-size:12px;
09 font-family:Verdana, Geneva, sans-serif;
10 background-color: #FFFFFF;
11 border-style: solid;
12 border-width: 3;
13 border-color: #666666;
14 }
15 .tooltip-image{
16 float:left;
17 margin-right:5px;
18 margin-bottom:5px;
19 margin-top:3px;
20 }
21 .tooltip span{
22 font-weight:700;
23 color:#0066FF;
24 }

5. Создаем пару элемнтов rel=”tooltip”, а в content прописываем текст всплывающей подсказки например вот так:

1 <a rel="tooltip" href="#">Любой текст</a>
2
3 <span>Текст элемента span</span>
4 <div>Текст элемента div</div>

A вот и демо

http://prootime.ru/css-hint#

Share