tootik-纯CSS Tooltips工具提示特效库

当前位置:主页 > CSS3库 > UI界面设计 > tootik-纯CSS Tooltips工具提示特效库
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
tootik-纯CSS Tooltips工具提示特效库
分享:

    插件介绍

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

    浏览器兼容性

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

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

网友评论