Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写，不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。
安装
可以使用bower或npm来安装该tooltip插件。
bower install hint.css
npm install --save hint.css
使用方法
首先要在页面头部引入hint.css文件。
<link rel="stylesheet" href="hint.css"></link>
在你的页面中需要使用tooltip的元素都至少需要设置一个tooltip的方向：hint--top、hint--bottom、hint--left、hint--right。
Hello Sir, <span class="hint--bottom">hover me.</span>
tooltip中的提示文本要写在data-hint属性中。
Hello Sir, <span class="hint--bottom" data-hint="Thank you!">hover me.</span>
下面是一组可用的data属性：
- hint--error：错误信息tooltip。（红色）
- hint--info：信息tooltip。（蓝色）
- hint--warning：警告信息tooltip。（黄色）
- hint--success：成功信息tooltip。（绿色）
- hint--always：tooltip一直出现。
- hint--rounded：圆角tooltip。
- hint--no-animate：没有动画效果的tooltip。
- hint--bounce：带动画效果的tooltip。
如果你需要改变hint--前缀，可以修改hint-variables.scss文件中的$prefix变量，要编译它可以参考这个页面。
浏览器兼容
hint.css可以工作在所有的最新版现代浏览器上，CSS的过渡效果可以在IE10+, Chrome 26+ 和 FF4+浏览器上工作。
- Chrome - basic + transition effects
- Firefox - basic + transition effects
- Opera - basic
- Safari - basic
- IE 10+ - basic + transition effects
- IE 8 & 9 - basic
