文本/链接
Balloon - 纯CSS3简单实用tooltips工具提示
PetitQ
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>
Github 地址：https://github.com/kazzkiq/balloon.css
| 演示地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
