balloon.css-纯CSS3简单实用的tooltips工具提示效果库
简要教程
balloon.css是一款实用纯CSS3制作的简单实用的tooltips工具提示效果库。该tooltips通过简单的设置可以实现在不同位置显示提示框，根据内容的多少来自动设置提示框的大小，它还可以显示unicode编码和Font Awesome字体图标等。
查看演示 下载插件
使用方法
实用该工具提示效果需要在页面中引入balloon.css或balloon.min.css文件。
<link rel="stylesheet" href="css/balloon.css">
tooltips的位置
可以通过data-balloon-pos属性的设置来实现不同tooltips的位置的定位。可选值有：up, down, left 或 right。
<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>
tooltips的长度
默认情况下，tooltips总是会显示在一行中，你可以通过data-balloon-length属性来修改默认的行为。可选值有：small,medium, large 或 fit。
<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button> <button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up"> I'm a medium tooltip. </button> <button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up"> I'm a large tooltip </button> <button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up"> I'm a Xlarge tooltip </button> <button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up"> My width fill fit to element </button>
使用字体图标
你可以在tooltips中添加任何的HTML字符或第三方的字体图标。
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button>
也可以添加Font Awesome字体图标。
<button class="fa" data-balloon="Font Awesome: " data-balloon-pos="up">Hover me!</button>
balloon.css的github地址为： https://github.com/kazzkiq/balloon.css
来源：jQuery之家
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
