主要思路：

使用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. mysql的if用法解决同一张数据表里面两个字段是否相等统计数据量。

    MySQL的使用用法如下所示:格式:if(Condition,A,B)意义:当Condition为true时,返回A:当Condition为false时,返回B.作用:作为条件语句使用.mysql的i ...

  2. MyCat基础安装配置-笔记（一）

    概述 Mycat 是一个数据库分库分表中间件,Mycat web 可以对 Mycat进行监控,这里分享一下 Mycat web 的搭建过程 详细内容可以参考 官方文档,下载文档地址:https://g ...

  3. RESTful-3架构详解

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  4. haproxy5-ssl

    配置实例: https://andyleonard.com/2011/02/01/haproxy-and-keepalived-example-configuration 配置haproxy支持htt ...

  5. Yii框架学习资源盘点

    盘点一些Yii框架的常用学习资源. 1.Yii中文论坛 https://www.yiichina.com/ 2.Yii中文网 http://www.yii-china.com/ 3.魏曦教你学Yii2 ...

  6. Delphi 10.3版本获取windows系统版本和CPU信息

    procedure TForm1.Button1Click(Sender: TObject); var mm:TRegistry; cpu:string; begin mm:=TRegistry.Cr ...

  7. swool配置ssl

    1 yum install  openssl  --enable-openssl -y 2 切换在swoole 安装目录 cd /usr/local/swoole 3 ./configure --en ...

  8. 运行报错：java.io.IOException: invalid constant type: 15

    jdk,tomcat更新到jdk1.8与 tomcat8 运行报错:java.io.IOException: invalid constant type: 15 pom.xml文件中更新javassi ...

  9. 一小时学会ECMAScript6新特性（一）

    ECMAScript 简介 简称es,是一套标准,javascript就是使用这套标准的语言.主流的浏览器使用的是ECAMScript5,ECAMScript6(ECAMScript2015)是一涛新 ...

  10. spring为什么推荐使用构造器注入？

    闲谈 ​ Spring框架对Java开发的重要性不言而喻,其核心特性就是IOC(Inversion of Control, 控制反转)和AOP,平时使用最多的就是其中的IOC,我们通过将组件交由Spr ...