balloon.css tooltips example

The original css is from:https://github.com/kazzkiq/balloon.css
First, link the balloon.css to your head,and basic main.css.Design the layout of your website,like me. 

I make the DOM body>.main>.container>.pos>h2+button
                                                                >.len>h2+button
                                                                >.icon>h2+button

css is  basic style, you can use whatever you like.

Because of the font-awesome icon class .f, the button is different with others.To keep it look great,I restyle the .fa class css. 

For positioning, use data-balloon-pos attribute with one of the values: up, down, left or right.

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.

You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:

I link to font Awesome, and choose a diamond http://fortawesome.github.io/Font-Awesome/icon/diamond/ 
Download the example here: http://pan.baidu.com/s/1mhHq4dE