Balloon Tooltips

Simple Tooltips Made of Pure CSS

I was looking the other day for a simple, JavaScript free tooltip snippet and I found Balloon. This is a pure CSS3, good looking piece of code to create tooltips. You can set the position, the length, you can use it with glyphs and icons fonts inside.

Very easy to use, simply call the css from your local files or use it via CDN (from cdnjs) and add the attributes data-balloon and data-balloon-pos

There is a drawback though; Balloon.css make use of pseudo-elements thus self-closing elements such as img, input and hr will not render tooltips. Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.

Source: Balloon.css

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.