jQuery工具提示插件 qTip

效果：

基本内容

下面文字中的链接应用了基本的tooltip，将鼠标移至链接上变可显现

ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为jQuery在线演示大全

Title属性

下面文字中的链接的tooltip内容为a标签的title属性，并为之设置cream样式，将鼠标移至链接上变可显现

ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为jQuery在线演示大全

元素任意属性

下面文字中的链接的tooltip内容为a标签的自定义属性tooltip，并为之设置dark样式，将鼠标移至链接上变可显现

ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为jQuery在线演示大全

元素任意属性

下面文字中的链接的tooltip内容为图片，将鼠标移至链接上变可显现

ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为jQuery在线演示大全

Corner Tips

点击此处循环显示不同的Corner Tips

图片热点
Planets Sun Mercury Venus USA North Dakota, Minnesota, South Dakota, Nebraska and Iowa
 
 
Tips位置固定

代码：   在线编辑

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<script type="text/javascript" src="http://www.ostools.net/js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://www.ostools.net/uploads/jquery/tooltips/qTips/jquery.qtip-1.0.0-rc3.min.js"></script>
<script>
$(document).ready(function() {
   $('#content a[href]').qtip({
      content: '欢迎使用ostools.NET'
   });
   $('#content1 a[href][title]').qtip({
      content: {
         text: false //tip内容使用a的title属性
      },
      style: 'cream' // 设置tip样式
   });
    
   $('#content2 a[tooltip]').each(function(){
      $(this).qtip({
         content: $(this).attr('tooltip'), //使用自定的属性tooltip内容作为tip显示内容
         style: 'dark' // 设置tip样式
      });
   });
   $('#content3 a[href]').qtip({
      // Simply use an HTML img tag within the HTML string
      content: '<img src="/img/qr.gif" alt="qr" />'
   });
    // Define corners and opposites arrays
    var corners = ['bottomLeft', 'bottomRight', 'bottomMiddle', 'topRight', 'topLeft', 'topMiddle', 'leftMiddle', 'leftTop', 'leftBottom', 'rightMiddle', 'rightBottom', 'rightTop'];
    var opposites = ['topRight', 'topLeft', 'topMiddle', 'bottomLeft', 'bottomRight', 'bottomMiddle', 'rightMiddle', 'rightBottom', 'rightTop', 'leftMiddle', 'leftTop', 'leftBottom'];
    var i = 0;
     
    $('#content4 a').click(function() {
        // If counter reaches maximum, reset
        if (i === corners.length) i = 0;
     
        // Destroy currrent tooltip if present
        if ($(this).data("qtip")) $(this).qtip("destroy");
     
        $(this).html(opposites[i]) // Set the links HTML to the current opposite corner
        .qtip({
            content: corners[i],
            // Set the tooltip content to the current corner
            position: {
                corner: {
                    tooltip: corners[i],
                    // Use the corner...
                    target: opposites[i] // ...and opposite corner
                }
            },
            show: {
                when: false,
                // Don't specify a show event
                ready: true // Show the tooltip when ready
            },
            hide: false,
            // Don't specify a hide event
            style: {
                border: {
                    width: 5,
                    radius: 10
                },
                padding: 10,
                textAlign: 'center',
                tip: true,
                // Give it a speech bubble tip with automatic corner detection
                name: 'cream' // Style it according to the preset 'cream' style
            }
        });
     
        i++; // Increase the counter
    });
 
   $('area').each(function(){
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
            name: 'dark', // Give it the preset dark style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         }
      });
   });
 
   $('#content6 img').each(function(){
      $(this).qtip({
         content: '<a href="#">Edit</a> | <a href="#">Delete</a>', // Give it some content
         position: 'topRight', // Set its position
         hide: {
            fixed: true // Make it fixed so it can be hovered over
         },
         style: {
            padding: '5px 15px', // Give it some extra padding
            name: 'cream' // And style it with the preset dark theme
         }
      });
   });
});
</script>
<style>
    body{font-size: 14px;font-family: Microsoft YaHei, 微软雅黑, Verdana, sans-serif, 宋体;line-height: 18px;}
    .section{position:relative;width:50%;float:left;background-color:#eef;padding:5px;margin-bottom:10px;}
    .title{font-size:16px;}
    .clear {clear: both;font-size: 1px;line-height: 0;}
</style>
<div class="section">
    <div class="title">基本内容</div>
    <P>下面文字中的链接应用了基本的tooltip，将鼠标移至链接上变可显现</P>
    <p id="content">ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为<a href="#">jQuery在线演示大全</a></p>
</div>
<div class="clear"></div>
<div class="section">
    <div class="title">Title属性</div>
    <P>下面文字中的链接的tooltip内容为a标签的title属性，并为之设置cream样式，将鼠标移至链接上变可显现</P>
    <p id="content1">ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为<a href="#" title="jQuery在线演示大全">jQuery在线演示大全</a></p>
</div>
<div class="clear"></div>
<div class="section">
    <div class="title">元素任意属性</div>
    <P>下面文字中的链接的tooltip内容为a标签的自定义属性tooltip，并为之设置dark样式，将鼠标移至链接上变可显现</P>
    <p id="content2">ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为<a href="#" tooltip="jQuery在线演示大全">jQuery在线演示大全</a></p>
</div>
<div class="clear"></div>
<div class="section">
    <div class="title">元素任意属性</div>
    <P>下面文字中的链接的tooltip内容为图片，将鼠标移至链接上变可显现</P>
    <p id="content3">ostools.net为您提供丰富、便捷、开放的在线工具，当前工具为<a href="#">jQuery在线演示大全</a></p>
</div>
<div class="clear"></div>
<div class="section">
    <div class="title">Corner Tips</div>
    <div class="center" style="text-align: center;width: 100%;margin: 0 auto;">
        <p id="content4"><a href="#">点击此处循环显示不同的Corner Tips</a></p>
    </div>
</div>
<div class="clear"></div>
<div class="section">
    <div class="title">元素任意属性</div>
    <div id="content5">
        <div class="center" style="text-align: center;width: 100%;margin: 0 auto;">
           <img class="left" src="http://www.w3schools.com/TAGS/planets.gif" alt="Planets" usemap="#planetmap" />
           <map name="planetmap">
              <area shape="rect" coords="0,0,82,126" alt="Sun" />
              <area shape="circle" coords="90,58,3" alt="Mercury" />
              <area shape="circle" coords="124,58,8" alt="Venus" />
           </map>
         
           <img class="left" src="http://www.jimthatcher.com/knowbility/files/usamap1.gif" alt="USA" usemap="#states" />
           <map name="states">
              <area shape="poly" href="#" alt="North Dakota, Minnesota, South Dakota, Nebraska and Iowa"
                 coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12,
                 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48,
                 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77,
                 262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88,
                 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45,
                 172,30,172,7,174,8" >
           </map>
            
           <div class="clear">&nbsp;</div>
        </div>
    </div>
</div>
<div class="clear">&nbsp;</div>
<div class="section">
    <div class="title">Tips位置固定</div>
    <div id="content6" style="text-align: center;width: 100%;margin: 0 auto;">
           <img src="http://www.jimthatcher.com/knowbility/files/usamap1.gif"/>
           <img src="http://www.w3schools.com/TAGS/planets.gif"/>
    </div>
</div>
<div class="clear"></div>