在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。

比如这个tooltip的效果展示：

这个便是tooltip提示框的效果。

在Hbulider上的代码展示：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>ToolTip</title>

         <style type="text/css">

             .body{

                 width: 500px;

                 height: 600px;

                 font-size: 14px;

                 background-color: #eee;

             }

             #demo{

                 width: 400px;

                 margin: auto;

                 position: relative;

                 border-radius: 10px;

                 background-color: #ccc;

                 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);

             }

             #demo a{

                 color: #11C2EE;

             }

             #demo h2{

                 color: #3CC4A9;

             }

             #demo tooltip{

                 color: #3CC4A9;

                 cursor: help;

             }

             .tooltip-box{

                 display: block;

                 line-height: 1.6;

                 background-color: #fff;

                 border: 1px solid #666;

                 font-size: 12px;

                 border-radius: 5px;

                 overflow: auto;

             }

         </style>

     </head>

     <body>

         <div id="demo">

             <h2>实现tooltip的效果</h2>

             <hr />

             <p>

                 渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。这首诗是著名诗人<a class="tooltip" id="tooltip1">王勃</a>的作品。借此来表达自己对友人的依依惜别之意。

             </p>

             <p>

                 我喜欢古诗，因为它能给别人更多的理解，想象。古诗是很唯美的，随处可见的美景，比如<a class="tooltip" id="tooltip2">荷花</a>，便有，接天莲叶无穷碧，映日荷花别样红。多美的诗呀！

             </p>

         </div>

         <script>

             var className = 'tooltip-box';

             var isIE = navigator.userAgent.indexOf('MSIE') > -1;

             function showTooltip(obj, id, html, width, height) {

         if (document.getElementById(id) == null) {

             var tooltipBox;

             tooltipBox = document.createElement('div');

             tooltipBox.className = className;

             tooltipBox.id = id;

             tooltipBox.innerHTML = html;

             obj.appendChild(tooltipBox);

             tooltipBox.style.width = width ? width + 'px' : 'auto';

             tooltipBox.style.height = height ? height + 'px' : 'auto';

             if (!width && isIE) {

                 tooltipBox.style.width = tooltipBox.offsetWidth;

             }

             tooltipBox.style.position = "absolute";

             tooltipBox.style.display = "block";

             var left = obj.offsetLeft;

             var top = obj.offsetTop + 20;

             if (left + tooltipBox.offsetWidth > document.body.clientWidth) {

                 var demoLeft = document.getElementById("demo").offsetLeft;

                 left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft;

                 if (left < 0) left = 0;

             }

             tooltipBox.style.left = left + 'px';

             tooltipBox.style.top = top + 'px';

             obj.onmouseleave = function () {

                 setTimeout(function () {

                     document.getElementById(id).style.display = "none";

                 }, 100);

             };

         } else {

             document.getElementById(id).style.display = "block";

         }

     }

             var t1 =document.getElementById("tooltip1");

             t1.onmouseenter = function(){

                 showTooltip(this,"t1","唐代诗人，唐初四大才子之一",150);

             }

             var t2 =document.getElementById("tooltip2");

             t2.onmouseenter = function(){

                 showTooltip(this, "t4", '<img src="img/1.jpg" width="400" /> ', 400);

             }

         </script>

     </body>

 </html>

现在开始来解析代码：

html部分和css比较简单和基础，看看就明白了。重点来看js部分的代码：

showTooltip这个函数就是让它显示的

这一段代码的作用就是，当将页面变小的时候，判断tooltip的提示框的宽度，如果宽度太大，但是屏幕太小，那就随着整个屏幕的大小进行变化。

var top = obj.offsetTop +20,之所以要加上20，是因为需要出现在提示对象的下方，如果没有这个20，那么提示框便会将其覆盖。

mouseleave，鼠标离开时，要执行的函数——延迟消失。

setTimeout(function,延迟的时间)，时间的单位是毫秒，又被称为定时器。setTimeout函数在关于动画这一方面用的比较多，常用于动画的延迟等，与之对应的函数还有clearTimeout函数，它的作用是除去setTimeout的效果，用法：

var t1 = setTimeout(function, 3000);

clearTimeout(t1);

可以利用setTimeout()实现颜色渐变的效果。

除此之外，还有一个函数，setInterval(functionName,time),它表示周期性地使用定时器。与此相反的还有clearInterval()函数，表示取消周期性使用定时器。

上面的代码主要是讲以一个图片和一些解释性文字组成的tooltip框，其他的以此类推。

虽然这个特效比较小，但是还是很奇妙的。

原生js实现tooltip提示框的效果的更多相关文章

  1. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  2. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  3. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  4. tooltip提示框组件

    Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...

  5. 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  6. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  7. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  8. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  9. Echarts数据可视化tooltip提示框，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. GPU && CUDA：主机和设备间数据传输测试

    数据传输测试,先从主机传输到设备,再在设备内传输,再从设备传输到主机. H-->D D-->D D-->H // moveArrays.cu // // demonstrates C ...

  2. Activiti学习记录(三)

    1.流程变量 1.1 流程图 流程变量在整个工作流中扮演很重要的作用.例如:请假流程中有请假天数.请假原因等一些参数都为流程变量的范围.流程变量的作用域范围是只对应一个流程实例.也就是说各个流程实例的 ...

  3. 深入理解Java GC

    一.概述 GC(Carbage Collection)垃圾收集器,由JVM自动回收已死亡的对象垃圾. 这也是Java与C++等语言的主要区别之一. 二.如何确认对象已死 1. 引用计数算法 引用计数法 ...

  4. abs的个人博客 http://abs001.top/blog

    abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 abs的个人博客 a ...

  5. position的 relative+absolute实现固定标签在窗口的某个位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. LeetCode#5 两个排序数组的中位数

      给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个有序数组的中位数.要求算法的时间复杂度为 O(log (m+n)) . 你可以假设 nums1 和 nums2  ...

  7. 14.VUE学习之-v-if v-else-if语法在网站注册中的实际应用讲解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. ubuntu 压缩 解压 命令大全

    ubuntu下文件压缩/解压缩命令总结 http://blog.csdn.net/luo86106/article/details/6946255 .gz 解压1:gunzip FileName.gz ...

  9. 学习Pytbon第八天，文件的操作

    文件的常用操作字符 data=open('月亮代表我的心',encoding='utf-8').read() f=open('月亮代表我的心',encoding='utf-8')#提取内存对象也叫文件 ...

  10. stm32的systick原理与应用

    /* SysTick滴答定时器 一.功能 SysTick定时器是一个简单的定时器,CM3\CM4内核芯片都具备此定时器.SysTick定时器常用来做延时,采用实时系统时则用来做系统时钟.无论用作延时还 ...