主要思路：

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

代码如下：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="renderer" content="webkit">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>JS tooltip</title>

 <style>

 /* css style */

 body{

     width:1000px;

     margin:10px auto;

 }

 .ztip{

     color:blue;

 }

 #ztip{

     display:none;

     position:absolute;

     background-color:#000;

     color:#fff;

     padding:3px 5px;

     font-size:12px;

     border-radius:3px;

     font-family:"Courier New" consolas;

     display: inline-block;

     text-align:center;

 }

 #ztip:after {

     content:'';

     position: absolute;

     width: 0;

     height: 0;

     border-color: transparent;

     border-style: solid;

 }

 #ztip.top:after {

     bottom: 0;

     left: 50%;

     margin-left: -5px;

     margin-bottom: -5px;

     border-width: 5px 5px 0;

     border-top-color: #000;

 }

 #ztip.bottom:after {

     top: 0;

     left: 50%;

     margin-left: -5px;

     margin-top: -5px;

     border-width: 0 5px 5px;

     border-bottom-color: #000;

 }

 #ztip.left:after {

     top: 50%;

     right: 0;

     margin-top: -5px;

     margin-right: -5px;

     border-width: 5px 0 5px 5px;

     border-left-color: #000;

 }

 #ztip.right:after {

     top: 50%;

     left: 0;

     margin-top: -5px;

     margin-left: -5px;

     border-width: 5px 5px 5px 0;

     border-right-color: #000;

 }

 #ztip.track{

     text-align:left;

 }

 #ztip.track:after {

     display:none;

 }

 </style>

 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

 </head>

 <body>

 <h1 style="text-align:center;">JS tooltip</h1>

 <div>

 Tight pants next level keffiyeh you probably haven't heard of them.

 <span class="ztip" title="#divInfo">HTML内容</span>

 booth beard raw denim letterpress vegan messenger bag stumptown.

 Farm-to-table seitan, mcsweeney's

 <span class="ztip" title="hello tooltip">普通Tooltip</span>

 sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray.

 Beard stumptown, cardigans banh mi lomo

 <span class="ztip ztip-track" title="hello tooltip track">鼠标跟踪Tooltip</span>

 . Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really

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

 artisan whatever keytar, scenester <br>farm-to-table

 <span class="ztip" data-ztip-width="100" title="hello tooltip<br>hello tooltip">折行Tooltip</span>

 Austin twitter handle freegan cred raw denim single-origin coffee viral.

 </div>

 <div id="divInfo" style="display:none;">

 hello <b>hello</b><br>

 <span style="color:red;">红色内容</span>

 </div>

 <script>

 $(function(){

     var ztipEl = null;

     $('.ztip').hover(function(){

         // 显示tooltip

         // 创建显示对象

         if (!ztipEl)

         {

             ztipEl = $('<div id="ztip"></div>');

             $('body').append(ztipEl);

         }

         // 获取内容

         var tip = $(this).data('ztip');

         if (tip == '') return;

         if (tip.indexOf('#') === 0)

         {

             tip = $(tip).html();

         }

         else

         {

             tip = tip.replace(/\\n/, '<br>');

             tip = tip.replace(/\n/, '<br>');

         }

         ztipEl.html(tip);

         // 是否鼠标跟随

         if ($(this).hasClass('ztip-track'))

         {

             ztipEl.addClass('track');

         }

         else

         {

             ztipEl.removeClass('track');

             var arrowClass = $(this).data('ztip-arrow')||'top';

             ztipEl.removeClass('top').removeClass('bottom').removeClass('left').removeClass('right');

             ztipEl.addClass(arrowClass);

             var top = 0, left = 0;

             if (arrowClass == 'top')

             {

                 top = $(this).offset().top - ztipEl.outerHeight() - 5;

                 left = $(this).offset().left + $(this).width() / 2 - ztipEl.outerWidth() / 2;

             }

             else if (arrowClass == 'bottom')

             {

                 top = $(this).offset().top + $(this).height() + 5;

                 left = $(this).offset().left + $(this).width() / 2 - ztipEl.outerWidth() / 2;

             }

             else if (arrowClass == 'left')

             {

                 top = $(this).offset().top + $(this).height() / 2 - ztipEl.outerHeight() / 2;

                 left = $(this).offset().left - ztipEl.outerWidth() - 5;

             }

             else if (arrowClass == 'right')

             {

                 top = $(this).offset().top + $(this).height() / 2 - ztipEl.outerHeight() / 2;

                 left = $(this).offset().left + $(this).width() + 5;

             }

             ztipEl.css({

                 'top': Math.round(top) + 'px',

                 'left': Math.round(left) + 'px',

             });

             ztipEl.show();

         }

     }, function(){

         // 隐藏

         ztipEl.hide();

     }).mousemove(function(e){

         // 跟随鼠标移动

         if (!ztipEl.hasClass('track')) return;

         e = e || window.event;

         var x = e.pageX || e.clientX + document.body.scroolLeft;

         var y = e.pageY || e.clientY + document.body.scrollTop;

         var top = y + 10;

         var left = x + 5;

         ztipEl.css('top', top + 'px');

         ztipEl.css('left', left + 'px');

         ztipEl.show();

     }).each(function(){

         // 获取显示内容，并移除title

         $(this).data('ztip', $(this).attr('title'));

         $(this).attr('title', '');

     });

 });

 </script>

 </body>

模仿bootstrap做的 js tooltip (添加鼠标跟随功能)的更多相关文章

  1. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  2. JS实现添加至购物车功能

    效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...

  3. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  4. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...

  5. Bootstrap 提示工具（Tooltip）插件

    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...

  6. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  7. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  8. react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...

  9. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

随机推荐

  1. gardner 算法matlab实现

    % 仿真4比特原始数据与星座图的编码映射过程: % 完成16QAM信号的调制解调: % 基带信号符号速率 ps ＝1Mbps: % 成形滤波器的滚降因子 a=0.8: % 载波信号频率fc=2MHz ...

  2. Lesson 2-4（字典）

    2.7 字典 &.字典是许多值的集合,索引可以使用许多不同的数据类型,不只是整数,可以是数.字符串或元组. &.字典的索引被称为“键”,键及其关联的值称为“键-值”对,这种键-值对也称 ...

  3. vertx的NetServer模块

    启动 public synchronized void listen(Handler<NetSocket> handler, SocketAddress socketAddress, Ha ...

  4. Interactive map of Linux kernel

    Interactive map of Linux kernel 2.6.36  : http://www.makelinux.net/kernel_map/ 注: 图中函数名带连接

  5. L1-049 天梯赛座位分配​​​​​​​

    L1-049 天梯赛座位分配 (20 分) 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i ...

  6. 当运行docker run -i -t ubuntu /bin/bash时，提示报错Error response from daemon: EOF？

    可能是下载过程中出现错误,重新执行docker pull ubuntu,在执行docker run -i -t ubuntu /bin/bash就OK了.

  7. sql server实现简繁转换

    /*--调用示例 gb_to_big和big_to_gb表存放着常用的简繁字 --可以百度到常用的简体汉字,然后用excel转换成繁体  再导入数据库. --转换为繁体 select dbo.f_GB ...

  8. 2017GCTF部分writeup

    0x00:热身题 渗透测试大法:第一招,扫端口:第二招,... . 扫后台试试呗,用御剑扫到存在robots.txt,访问发现很多个Disallow:可能的试试,发现flag在/rob0t.php中 ...

  9. 《团队作业第三、第四周》五小福团队作业--Scrum 冲刺阶段--Day7

    <团队作业第三.第四周>五小福团队作业--Scrum 冲刺阶段--Day7 一.项目燃尽图 二.项目进展 [20172301郭恺第七天的进展] 第七天完成的任务: 代码整合,界面调整为相对 ...

  10. Winform消息与并行的形象比喻

    有一次我给同事讲述跨线程调用时使用了高速行驶的并行列车来比喻,感觉比较形象. 线程列车 多线程就像多个并行的列车,每个线程在各自的轨道上不断向前行驶.主界面所在的线程称为UI线程,也叫主线程,主线程依 ...