主要思路：

使用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. 实践笔记_J2EE_Server_Tomcat_tomcat域名绑定_1_单域名绑定

                                                                      Tomcat域名绑定(1)单域名绑定 1. 测试环境说明 名称 版本 ...

  2. sql查找某一列中某一数值出现次数大于3的记录的前3条

    SELECT * FROM table  GROUP BY column HAVING COUNT(column)>=3 ORDER BY column DESC LIMIT 0,3;

  3. ORACLE安装报错解决

    今天在虚拟机中安装了一个WINDOWS系统,用于安装oracle服务器:从安装到使用中出现了很多的问题,把这些问题解决掉,花了不少时间,查了不少的资料. 第一个,我在安装过程中,出现了ORA-0092 ...

  4. JS中this指向问题相关知识点及解析

    概括:this指向在函数定义的时候是无法确定的,只有在函数调用执行的时候才能确定this最终指向了谁,this最终指向的是调用它的对象(常见的说法,后面有小小的纠正): 例1: 图中的函数fn1其实是 ...

  5. sql server 实现split功能 行转列

    --實現split功能的函數create function [dbo].[func_split]( @SourceSql varchar(max), @StrSeprate varchar(10))r ...

  6. CF809E Surprise me!

    题解: 一道很套路的题目 首先一个结论 $\phi(xy)=\frac{\phi(x)*\phi(y)*gcd(x,y)}{\phi(gcd(x,y))}$ 这个按照$\phi$的定义很容易知道 然后 ...

  7. 使用Windows Service Wrapper快速创建一个Windows Service 如nginx

    前言 今天介绍一个小工具的使用.我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我 ...

  8. 各种输出速度比较(小白应该来看看,dalao绕道)

    其实这个是修改之后测试的速度,因为之前测量方式有一点问题,经过@复杂的哈皮狗 的正确提醒后更正了一下 之前我一直以为各种输出速度比较是putchar>printf>cout; 但事实上并不 ...

  9. XYZZY spfa 最长路 判环

    题意: 有n个点  m条边  每个边有权值 一开始有一百血  每次经过一条路都会加上其权值 判断是否能够到达n 显然  有正环的时候肯定能够到达 最短路好题!!!!!!! 显用folyed判断是否联通 ...

  10. Set接口下的集合

    一.集合(定义字段的时候统一使用包装类) 1.集合大类分为List.Set.Map三种,其中,List集合是有序可重复的,并且可以使用普通for循环.增强for循环.正向迭代器.双向迭代器:Set集合 ...