Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.
Positioning
For positioning, use data-balloon-pos attribute with one of the values: up, down, left or right
Hover me!Hover me!Hover me!Hover me!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.
Hover me!I'm a medium tooltip.I'm a large tooltipI'm a Xlarge tooltipMy width fill fit to elementGlyphs and Icon Fonts
You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:
Hover me!Hover me!Hover me!BlablablaBalloon.css make use of pseudo-elements thus self-closing elements such as ,
and
will not render tooltips.
Also keep in mind that if pseudo elements are already in use on a element, the tooltip will conflict with them resulting in potential bugs.
