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

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

发表于: HTML & CSS. 评论 (1)
Sponsor

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

Hint.css GIF图片演示

hint-css CSS Tooltips库

研究了一下这个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>

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

在线DEMO:http://kushagragour.in/lab/hint/
下载地址(Github):https://github.com/chinchang/hint.css
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论One Response to “简单易用的CSS Tooltips库 – hint.css”

  1. island8 - 回复
    2016 年 01 月 06 日 下午 5:31

    不能换行。。


{ 发表评论 }