对话框/Tips
CSS功能齐全的Tooltip工具提示插件
PetitQ
Hint.css 是一款功能强大的 Tooltip 工具提示插件库。hint.css 使用 SASS 来编写，不依赖于 JavaScript。该 tooltip 插件使用 data-*属性、伪元素、内容属性和 CSS3 过渡效果来制作 tooltip。
使用方法
首先要在页面头部引入 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
