纯CSS简单的动画提示工具库

演示  website 下载

这是一款轻量级简单的css动画提示工具库，可以为任何html5的dom元素添加data属性，创建动画提示工具。

特征：

• 支持4个方向：顶部、右侧、底部和左侧

• 支持任何字体和图标。

使用方法：

1.下载缩小版的Balloon.css并将其加载到网页中。

<link href="balloon.min.css" rel="stylesheet">

2.向给定元素添加顶部工具提示，如下所示：

• data-balloon: 指定工具提示中显示的内容

• data-balloon-pos=”up”: 指定工具提示方向。接受值： ‘up’, ‘right’, ‘down’ and ‘left’.

<div class="box" 
     data-balloon="帝国模板之家" 
     data-balloon-pos="up">

3.使用更改工具提示的大小data-balloon-length属性。接受值：“small”、“medium”、“large”、“xlarge”或“fit”。

<div class="box" 
     data-balloon="I'm a xlarge tooltip" 
     data-balloon-pos="down" 
     data-balloon-length="xlarge">

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。