模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

Posted on 2017-10-09 17:37 PHP-张工阅读(1741) 评论(0) 编辑收藏举报

主要思路：

使用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>

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

历史上的今天：
2015-10-09 PHP DES 加解密

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

模仿bootstrap做的 js tooltip (添加鼠标跟随功能)