主要思路：
使用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 lang="zh-CN"> 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 style="text-align:center;">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 id="divInfo" style="display:none;"> 102 hello <b>hello</b><br> 103 <span style="color:red;">红色内容</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 id="ztip"></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(/ /, '<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>