主要思路：

使用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. linux 下修改网关mac地址

    以rtl8196e为例 eth0:mac 地址设为123456789012 # flash set hw_nic0_addr  123456789012 eth1:mac 地址设为1122334455 ...

  2. OPPO A3在哪里打开usb调试模式的详细教程

    当我们使用电脑通过数据线连接上安卓手机的时候,如果手机没有开启Usb开发者调试模式,电脑则无办法成功读到我们的手机,这时我们需要找方法将手机的Usb开发者调试模式打开,这里我们叙述OPPO A3如何开 ...

  3. EndNote中文文献导入出错和数量限制解决

    发现之前记录的存在忽略,把存在的一个重要问题遗漏了,Endnote中文文献导入无法导入,软件奔溃问题,现在在原先基础上补上(补到最后): ..一路绿色φ(>ω<*) φ(>ω< ...

  4. HashMap 和 Hashtable 的 6 个区别

    HashMap 是非常重要且常用的一种集合,还有一个和它类似的集合即Hashtable,有必要知道它们之间的区别. 1.线程安全: Hashtable 是线程安全的,HashMap 则不是线程安全的. ...

  5. mysql explain结果含义

    在SQL语句前面加上EXPLAIN即可 各字段含义 id SELECT识别符.这是SELECT的查询序列号 select_type SELECT类型,可以为以下任何一种: SIMPLE:简单SELEC ...

  6. Linux tar命令之--exclude参数 排除指定的文件或目录

    https://my.oschina.net/u/3285916/blog/1632552 参数: --exclude 打包时排除不需要处理的文件或目录 说明: tar -zcf a.tar.gz 打 ...

  7. UWP 调用Win32 关机

    话说最近程序需要个晚上自动关机的功能 原则上 uwp 应该是没有关机权限的 上网搜索之 有人说只要这样就可以了 var psi = new ProcessStartInfo("shutdow ...

  8. Flink写入kafka时，只写入kafka的部分Partitioner，无法写所有的Partitioner问题

    1. 写在前面 在利用flink实时计算的时候,往往会从kafka读取数据写入数据到kafka,但会发现当kafka多个Partitioner时,特别在P量级数据为了kafka的性能kafka的节点有 ...

  9. 【WPF开发备忘】使用MVVM模式开发中列表控件内的按钮事件无法触发解决方法

    实际使用MVVM进行WPF开发的时候,可能会用到列表控件中每行一个编辑或删除按钮,这时直接去绑定,发现无法响应: <DataGridTemplateColumn Header="操作& ...

  10. 3.CNN-卷积神经网络推导

    直接参考刘建平老师的播客~~写的炒鸡好~~https://www.cnblogs.com/pinard/p/6494810.html