Positioning
For positioning, use data-balloon-pos attribute with one of the values: up, down, left or 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>Length
By default, tooltips will always remain single-line no matter their length. You can change this behavior by using the attribute data-balloon-length with one of the values: small, medium, large or 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>Glyphs and Icon Fonts
You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button><button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button><button class="fa" data-balloon="Font Awesome:     " data-balloon-pos="up">Hover me!</button>X关闭
纯CSS3简单实用的tooltips工具提示特效源码
balloon.css是一个实用纯CSS3制作的简单实用的tooltips工具提示效果库。该tooltips通过简单的设置可以实现在不同位置显示提示框，根据内容的多少来自动设置提示框的大小，它还可以显示unicode编码和Font Awesome字体图标等。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋