纯CSS功能齐全的Tooltip工具提示插件

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS功能齐全的Tooltip工具提示插件
纯CSS功能齐全的Tooltip工具提示插件
分享:

    插件介绍

    Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写,不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-07
    阅读:
简要教程

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--tophint--bottomhint--lefthint--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