主要思路：

使用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. iOS开发之Dictionary与NSData互转

    1.将NSData转换成Dictionary /** 将二进制数据转换成字典*/ + (NSDictionary *)dictionaryForJsonData:(NSData *)jsonData ...

  2. oracle 启动三步骤

    oracle 启动三步骤 oracle启动会经过三个过程,分别是nomount.mount.open 一.nomount 阶段 nomount 阶段,可以看到实例已经启动.oracle进程会根据参数文 ...

  3. (转载)C# 枚举 FlagsAttribute用法

    这是读过几篇文章后发现整理的最完整的一篇文章 转载地址:枚举特性FlagsAttribute的用法 先看官方的解释:指示可以将枚举作为位域(即一组标志)处理. 看起来并不好理解,到底什么是作为位域处理 ...

  4. Unity 5.x动态加载光照信息（所有坑已踩）

    能搜到这的应该是被新的烘焙系统坑了少时间,4.x到5.x美术必须重新烘焙,关于美术的没什么说的,只有---重新烘焙! 新的烘焙系统,为了兼容5.x的多场景编辑功能,将烘焙信息从mesh全部挪到了一个中 ...

  5. 《ServerSuperIO Designer IDE使用教程》-4.增加台达PLC驱动及使用教程，从0到1的改变。发布：v4.2.3版本

    v4.2.3 更新内容:1.优化数据存储部分,提高效率.2.修复数据库服务停止造成程序异常退出的现象.3.修复本机没有串口造成无法增加设备驱动的情况.4.增加编辑设备和监测点配置信息功能.5.增加台达 ...

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

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

  7. JMeter关联的几种方式总结案例

    1.接口响应结果,通常为HTML.JSON格式的数据,对于HTML的响应结果的提取,可以通过正则表达式,也可以通过XPath 来提取. 2.对于JSON格式的数据,可以通过正则表达式.JSON Ext ...

  8. 关于使用spring版本4.1.6注解@Import报错

    记录一下遇到的错误 org.springframework.beans.factory.parsing.BeanDefinitionParsingException: 使用环境:spring 4.1. ...

  9. （一）stm32f103~~GPIO基本操作一（led灯）

    GPIO基本操作,如果更换IO口只需要更换端口设置即可 led.h文件 #ifndef __LED_H #ifndef __LED_H #define __LED_H #include "s ...

  10. java字符串转json

    针对不同jar包 一: import org.json.JSONObject; JSONObject jo = new JSONObject(new String(需要转换的字符串)); 二: imp ...