模仿bootstrap做的 js tooltip ，添加鼠标跟随功能
主要思路：
使用jquery hover方法，当进入时显示tooltip，移出时隐藏tooltip
当设定为鼠标跟随时，使用mousemove事件显示tooltip
根据tooltip显示位置设置，计算tooltip应显示位置
使用方法：
<span class="ztip" title="hello tooltip">普通Tooltip</span>
<span class="ztip" title="#divInfo">HTML内容</span> （获取divInfo的内容显示）
<span class="ztip ztip-track" title="hello tooltip track">鼠标跟踪Tooltip</span>
<span class="ztip" title="hello tooltip" data-ztip-arrow="top">top</span>
<span class="ztip" title="hello tooltip" data-ztip-arrow="bottom">bottom</span>
<span class="ztip" title="hello tooltip" data-ztip-arrow="left">left</span>
<span class="ztip" title="hello tooltip" data-ztip-arrow="right">right</span>
代码如下：
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="renderer" content="webkit">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>JS tooltip</title>
9 <style>
10 /* css style */
11 body{
12 width:1000px;
13 margin:10px auto;
14 }
15 .ztip{
16 color:blue;
17 }
18 #ztip{
19 display:none;
20 position:absolute;
21 background-color:#000;
22 color:#fff;
23 padding:3px 5px;
24 font-size:12px;
25 border-radius:3px;
26 font-family:"Courier New" consolas;
27 display: inline-block;
28 text-align:center;
29 }
30 #ztip:after {
31 content:'';
32 position: absolute;
33 width: 0;
34 height: 0;
35 border-color: transparent;
36 border-style: solid;
37 }
38 #ztip.top:after {
39 bottom: 0;
40 left: 50%;
41 margin-left: -5px;
42 margin-bottom: -5px;
43 border-width: 5px 5px 0;
44 border-top-color: #000;
45 }
46 #ztip.bottom:after {
47 top: 0;
48 left: 50%;
49 margin-left: -5px;
50 margin-top: -5px;
51 border-width: 0 5px 5px;
52 border-bottom-color: #000;
53 }
54 #ztip.left:after {
55 top: 50%;
56 right: 0;
57 margin-top: -5px;
58 margin-right: -5px;
59 border-width: 5px 0 5px 5px;
60 border-left-color: #000;
61 }
62 #ztip.right:after {
63 top: 50%;
64 left: 0;
65 margin-top: -5px;
66 margin-left: -5px;
67 border-width: 5px 5px 5px 0;
68 border-right-color: #000;
69 }
70 #ztip.track{
71 text-align:left;
72 }
73 #ztip.track:after {
74 display:none;
75 }
76 </style>
77 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
78 </head>
79 <body>
80 <h1 >JS tooltip</h1>
81
82 <div>
83 Tight pants next level keffiyeh you probably haven't heard of them.
84 <span class="ztip" title="#divInfo">HTML内容</span>
85 booth beard raw denim letterpress vegan messenger bag stumptown.
86 Farm-to-table seitan, mcsweeney's
87 <span class="ztip" title="hello tooltip">普通Tooltip</span>
88 sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray.
89 Beard stumptown, cardigans banh mi lomo
90 <span class="ztip ztip-track" title="hello tooltip track">鼠标跟踪Tooltip</span>
91 . Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really
92 <span class="ztip" title="hello tooltip" data-ztip-arrow="top">top</span>
93 <span class="ztip" title="hello tooltip" data-ztip-arrow="bottom">bottom</span>
94 <span class="ztip" title="hello tooltip" data-ztip-arrow="left">left</span>
95 <span class="ztip" title="hello tooltip" data-ztip-arrow="right">right</span>
96 artisan whatever keytar, scenester <br>farm-to-table
97 <span class="ztip" data-ztip-width="100" title="hello tooltip<br>hello tooltip">折行Tooltip</span>
98 Austin twitter handle freegan cred raw denim single-origin coffee viral.
99 </div>
100
101 <div >
102 hello <b>hello</b><br>
103 <span >红色内容</span>
104 </div>
105
106 <script>
107 $(function(){
108 var ztipEl = null;
109 $('.ztip').hover(function(){
110 // 显示tooltip
111
112 // 创建显示对象
113 if (!ztipEl)
114 {
115 ztipEl = $('<div >);
116 $('body').append(ztipEl);
117 }
118
119 // 获取内容
120 var tip = $(this).data('ztip');
121 if (tip == '') return;
122 if (tip.indexOf('#') === 0)
123 {
124 tip = $(tip).html();
125 }
126 else
127 {
128 tip = tip.replace(/\\n/, '<br>');
129 tip = tip.replace(/\n/, '<br>');
130 }
131 ztipEl.html(tip);
132
133 // 是否鼠标跟随
134 if ($(this).hasClass('ztip-track'))
135 {
136 ztipEl.addClass('track');
137 }
138 else
139 {
140 ztipEl.removeClass('track');
141 var arrowClass = $(this).data('ztip-arrow')||'top';
142 ztipEl.removeClass('top').removeClass('bottom').removeClass('left').removeClass('right');
143 ztipEl.addClass(arrowClass);
144 var top = 0, left = 0;
145 if (arrowClass == 'top')
146 {
147 top = $(this).offset().top - ztipEl.outerHeight() - 5;
148 left = $(this).offset().left + $(this).width() / 2 - ztipEl.outerWidth() / 2;
149 }
150 else if (arrowClass == 'bottom')
151 {
152 top = $(this).offset().top + $(this).height() + 5;
153 left = $(this).offset().left + $(this).width() / 2 - ztipEl.outerWidth() / 2;
154 }
155 else if (arrowClass == 'left')
156 {
157 top = $(this).offset().top + $(this).height() / 2 - ztipEl.outerHeight() / 2;
158 left = $(this).offset().left - ztipEl.outerWidth() - 5;
159 }
160 else if (arrowClass == 'right')
161 {
162 top = $(this).offset().top + $(this).height() / 2 - ztipEl.outerHeight() / 2;
163 left = $(this).offset().left + $(this).width() + 5;
164 }
165 ztipEl.css({
166 'top': Math.round(top) + 'px',
167 'left': Math.round(left) + 'px',
168 });
169 ztipEl.show();
170 }
171 }, function(){
172 // 隐藏
173 ztipEl.hide();
174 }).mousemove(function(e){
175 // 跟随鼠标移动
176 if (!ztipEl.hasClass('track')) return;
177 e = e || window.event;
178 var x = e.pageX || e.clientX + document.body.scroolLeft;
179 var y = e.pageY || e.clientY + document.body.scrollTop;
180 var top = y + 10;
181 var left = x + 5;
182 ztipEl.css('top', top + 'px');
183 ztipEl.css('left', left + 'px');
184 ztipEl.show();
185 }).each(function(){
186 // 获取显示内容，并移除title
187 $(this).data('ztip', $(this).attr('title'));
188 $(this).attr('title', '');
189 });
190 });
191 </script>
192
193 </body>