Balloon.css文件允许用户给元素添加提示，而这些在Balloon.css中完全是由CSS来实现，不需要使用JavaScript。
如何使用
1、提示的位置
提示的位置可以使用data-balloon-pos属性进行控制，这个属性的值可以是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>
2、提示框的长度
默认情况下，balloon.css 生成的提示符总是保持一行，而不管文本的实际长度。我们可以使用data-balloon-length属性来改变这一情况。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>
3、字体和图标
你甚至可以在提示里面使用任意的HTML特殊字符，或者是第三方的图标字体：
实现代码如下：
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button> <button data-balloon="Emojis: " 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：用纯CSS写的tooltips】（https://www.iteblog.com/archives/1600.html）
我想修改balloon.min.css 的提示效果的背景颜色 怎么修改？
很好办，到balloon.min.css里面找到以下的代码
[data-balloon]:before { filter: alpha(opactiy=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out; -moz-transition: all 0.18s ease-out; -ms-transition: all 0.18s ease-out; -o-transition: all 0.18s ease-out; transition: all 0.18s ease-out; background: rgba(17,17,17,0.9); border-radius: 4px; color: #fff; content: attr(data-balloon); font-size: 12px; padding: .5em 1em; position: absolute; white-space: nowrap; z-index: 10; }background: rgba(17,17,17,0.9); 就是你要修改的。
十分的感谢帮助。