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

在线预览    源码下载