tootik是一款纯CSS Tooltips工具提示特效库。该工具提示效果使用CSS3/SASS来制作，支持使用data属性来配置tooltips的位置和属性，效果非常炫酷。

安装

可以通过bower或npm来安装tootik工具提示库。

npm install tootik
bower install tootik                  
                

使用方法

在页面中引入tootik.min.css文件。

<link rel="stylesheet" href="path/to/tootik.min.css">            
                

HTML结构

在你需要显示tooltips的元素上添加data-tootik属性。

<span data-tootik="...">...</span>
                

你还可以通过data-tootik-conf属性来设置tooltips的位置和参数。

<span data-tootik="..." data-tootik-conf="...">...</span>
                

位置属性

<span data-tootik="...">Top</span>
<span data-tootik="..." data-tootik-conf="right">Right</span>
<span data-tootik="..." data-tootik-conf="bottom">Bottom</span>
<span data-tootik="..." data-tootik-conf="left">Left</span>                  
                

情景类型

<span data-tootik="..." data-tootik-conf="invert">invert</span>
<span data-tootik="..." data-tootik-conf="success">success</span>
<span data-tootik="..." data-tootik-conf="info">info</span>
<span data-tootik="..." data-tootik-conf="warning">warning</span>
<span data-tootik="..." data-tootik-conf="danger">danger</span>                
                

特性

<span data-tootik="..." data-tootik-conf="shadow">shadow</span>
<span data-tootik="..." data-tootik-conf="delay">delay</span>
<span data-tootik="..." data-tootik-conf="multiline">multiline</span>
<span data-tootik="..." data-tootik-conf="no-fading">no-fading</span>
<span data-tootik="..." data-tootik-conf="no-arrow">no-arrow</span>
<span data-tootik="..." data-tootik-conf="square">square</span>              
                

tootik工具提示库的github地址为：https://github.com/eliorshalev/tootik。

在线预览    源码下载