Еще один вид подсказок на jQuery
Шаг 1.
Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:
-
Code
<script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="tooltip.js"></script>
Шаг 2.
Далее пропишем следующий скрипт:
-
Code
<script type="text/javascript">
2 $(document).ready(function(){
3 $("a#link").easyTooltip({
4 useElement: "item"
5 });
6 });
7 </script>
-
Шаг 3.
В отдельный CSS-файл или между тегами <head> пропишем стили, отвечающие за внешний вид посказок. Вы можете отредактировать эти стили по своему желанию.
-
Code
#easyTooltip{
2
3 margin:0 10px 1em 0;
4
5 width:250px;
6
7 padding:8px;
8
9 background:#fcfcfc;
10
11 border:1px solid #e1e1e1;
12
13 line-height:130%;
14
15 }
16
17 #easyTooltip h3{
18
19 margin:0 0 .5em 0;
20
21 font:13px Arial, Helvetica, sans-serif;
22
23 text-transform:uppercase;
24
25 }
26
27 #easyTooltip p{
28
29 margin:0 0 .5em 0;
30
31 }
32
33 #easyTooltip img{
34
35 background:#fff;
36
37 padding:1px;
38
39 border:1px solid #e1e1e1;
40
41 float:left;
42
43 margin-right:10px;
44
45 }
46
47 #item{display:none;}
-
В нужном нам месте на странице пропишем ссылку и дадим ей идентификатор link. Например:
-
Code
1 Наведите мышкой <a href="http://ruseller.com/" id="link">сюда</a>
-
Создадим блок с идентификатором item, в который впишем текст непосредственно самой подсказки (по желанию сюда можно вставить картинку, список, или что то еще). Т.е. у Вас должно получиться примерно так:
-
Code
<div id="item">
2
3 <h3>Ruseller.com</h3>
4
5 <img src="image.gif" />
6
7 <p>Текст</p>
8
9 </div>
-
Вот и все! Оригинальные и функциональные подсказки для ссылок готовы!
