CSS图书馆 » 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>

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

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

  1. island8 - 回复

    不能换行。。


{ 发表评论 }