简单易用的CSS Tooltips库 – hint.css

Sponsor

使用CSS可以写出漂亮的Tooltips（提示样式）效果，但是写出来有点麻烦，又定位改颜色什么的，如果想快速实现这个tooltips提示样式，那么我建议你使用今天我们分享的简单易用的CSS Tooltips库：Hint.css，下面GIF演示，也可以在文章底部看在线DEMO链接。

Hint.css GIF图片演示

研究了一下这个css tooltips库的实现方法，它使用纯CSS编写，动画用CSS3的transition属性。

在这个CSS代码里面我看到了.hint:after, [data-hint]:after{conent:attr(data-hint)}这个样式，使用content的attr属性通过伪元素展示提示信息出来，十分聪明的写法。

浏览器兼容

• Chrome – 基本功能 + transition 效果
• Firefox – 基本功能 + transition 效果
• Opera – 基本功能
• Safari – basic
• IE 10+ – 基本功能 + transition 效果
• IE 8 & 9 –基本功能

使用方法

首先引入CSS样式表

<link href="hint.css" rel="stylesheet" />

HTML代码

通过hint–top, hint–bottom, hint–left, hint–right来改变tootips的提示方向。

而data-hint就是提示文字。

你好， <span data-hint="谢谢!">鼠标经过这里试试吧？</span>

是不是超简单的调用呢？推荐用在企业网站，博客等平台上哦。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。