模仿bootstrap做的 js tooltip (新增滑鼠跟隨功能)

阿新 • • 發佈：2019-01-17

主要思路：

使用jquery hover方法，當進入時顯示tooltip，移出時隱藏tooltip
當設定為滑鼠跟隨時，使用mousemove事件顯示tooltip
根據tooltip顯示位置設定，計算tooltip應顯示位置

使用方法：

普通Tooltip
HTML內容 （獲取divInfo的內容顯示）
滑鼠跟蹤Tooltip
top
bottom
left
right

程式碼如下：

  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(/\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>

模仿bootstrap做的 js tooltip (新增滑鼠跟隨功能)

模仿bootstrap做的 js tooltip (新增滑鼠跟隨功能)

bootstrap+vue.js實現簡單的購物車功能

原生js如何做一個鏈式運動，JavaScript怎麼做滑鼠跟隨效果

JS特效教程：給網站新增滑鼠點選彈出指定漢字特效

滑鼠跟隨效果 vue或者js通用

js滑鼠跟隨事件及位置獲取

如何給文章新增標籤以及如何讓 js 中的資料跟隨 form 表單一起提交到後臺

用js給div新增滑鼠懸停事件

js實現滑鼠跟隨效果

為網頁背景新增一個跟隨滑鼠的動態變幻線條

Bootstrap的js插件之輪播(carousel)

jquery+bootstrap做一個開關（互斥選擇）

Bootstrap做簡單的網站首頁

Bootstrap fileinput.js，最好用的檔案上傳元件

BootStrop--bootstrap-paginator.js 分頁外掛的使用

js原生新增clsss

Vue.js less 新增支援和遇到的問題

js動態新增表格和刪除表格

用js動態新增select標籤的option

js怎樣新增、移除、移動、複製、建立和查詢節點

模仿bootstrap做的 js tooltip (新增滑鼠跟隨功能)

相關推薦