安利一款轻量的tooltip插件，使用简单，扩展性好，而且作者一直都有更新维护，用在项目中最好不过了。
官方GitHub : https://github.com/atomiks/tippyjs
CSDN下载插件： http://download.csdn.net/download/qq_25835645/10147435
简要教程(如下) ：
安装
可以通过npm来安装在Tippy.js插件。
npm install --save tippy.js
使用方法在页面中引入tippy.js和tippy.css文件。
<linkrel="stylesheet"rel="external nofollow" href="css/tippy.css">
<scriptsrc='path/to/tippy.js'></script>
HTML结构
你需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。
<buttonclass="btn tippy" title="I'm a tooltip!">tooltip测试</button>
初始化插件
在页面DOM元素加载完毕之后，通过new Tippy()方法来实例化tooltip。
newTippy('.tippy')
一个完整的使用tippy.js的HTML文档的结构如下：
<!DOCTYPE html>
<html>
<head>
<linkrel="stylesheet"rel="external nofollow" href="tippy.css">
</head>
<body>
<buttonid="myId"title="Tooltip text">Button text</button>
<scriptsrc="tippy.js"></script>
<script>
new Tippy('#myId')
</script>
</body>
</html>
配置参数你可以在实例化Tippy对象时以对象的方式传入配置参数，例如：
newTippy('.tippy', { position: 'right', animation: 'fade'})
也可以在HTML中直接以data-*的方式来使用配置参数：
<buttonclass="btn tippy" title="I'm a tooltip!"
data-animatefill="false"
data-animation="scale"
data-position="bottom">Overridden</button>
Tippy.js所有可用的配置参数如下：
参数默认值可选值描述position'top''top' 'bottom' 'left' 'right'指定tooltip出现的位置。trigger'mouseenter focus''mouseenter' 'focus' 'click' 'manual'指定触发tooltip的事件。interactivefalsetrue falsetoltip是否可互动。delay0>=0的整数指定多少毫秒之后才显示tooltip。animation'shift''shift' 'perspective' 'fade' 'scale' 'none'指定tooltip的动画类型。arrowfalsetrue false是否在tooltip上显示箭头。animateFilltruetrue false添加material design风格的动画。如果arrow设置为true，该选项无效。duration400>=0的整数tooltip的持续动画时间。htmlfalsefalse或模板的id是否允许在tooltip中显示html模板内容。theme'dark''dark' 'light'tooltip的主题。offset0任何数值tooltip的偏移值，单位像素。hideOnClicktruetrue false指定是否在悬停后单击其元素时隐藏tooltip。 事件Tippy.js提供了4个可用的回调函数：
newTippy('.tippy', {
beforeShown:function() {
// When the tooltip has been triggered and has started to transition in
},
shown:function() {
// When the tooltip has fully transitioned in and is showing
},
beforeHidden:function() {
// When the tooltip has begun to transition out
},
hidden:function() {
// When the tooltip has fully transitioned out and is hidden
}
})