原生js实现tooltip提示框的效果

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

比如这个tooltip的效果展示：

 

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

在Hbulider上的代码展示：

  1 
  2 
  3     
  4         
  5         
  6         
 42     
 43     
 44         

 45             
实现tooltip的效果
 46             

 47             

 48                 渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。这首诗是著名诗人王勃的作品。借此来表达自己对友人的依依惜别之意。
 49             
 50             
 51             

 52                 我喜欢古诗，因为它能给别人更多的理解，想象。古诗是很唯美的，随处可见的美景，比如荷花，便有，接天莲叶无穷碧，映日荷花别样红。多美的诗呀！
 53             
 54         
 55         
116     
117 

 现在开始来解析代码：

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);

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

 

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

 

每天都要进步一点，积少以成多。。。