转载

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之家

原文 http://www.html5cn.org/article-9427-1.html

正文到此结束

所属分类：编程技术

本文标签： CSS 下载 UI http jquery src 插件 https HTML git HTML5 ip GitHub FIT
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

balloon.css-纯CSS3简单实用的tooltips工具提示效果库

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流