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

在线预览    源码下载