CSS

Balloon.css: Simple Pure CSS Tooltips

Balloon.css lets you create simple CSS tooltips within minutes. More importantly, the tooltips are coded in pure CSS, and require no JavaScript to work. You can add CSS tooltips to elements in just a few lines of code using Balloon.css

Overview

If you are looking to add tooltips to your elements without using JavaScript, Balloon.css is the solution meant for you. It lets you position the tooltips as per your needs, and you can also customize their length — irrespective of their length, the tooltips remain single-line by default, and by making use of attributes such as data-balloon-length you can change this behavior.

balloon-css-tooltips-length

Furthermore, you can also add HTML special characters to CSS tooltips, such as glyphs. And of course, you can make use of third-party icon fonts as well.

Balloon.css is maintained in SASS and LESS, and is open source.

Mode of Operation

Using Balloon.css is pretty simple. First, you need to call Balloon.css to your HTML code:

<link rel="stylesheet" href="path/to/balloon.css">

Thereafter, you just need to add the attributes data-balloon and data-balloon-pos to your elements, and you’re good to go!

<span data-balloon="I'm a tooltip." data-balloon-pos="up">Blablabla</span>

Appraisal

On the downside, Balloon.css primarily works with pseudo-elements, so you cannot make use of it in HTML tags such as <img> or <input> or any other similar self-closing element. Also, if the pseudo-elements are already being used on another elements, Balloon.css tooltips might conflict with them and render your code unstable.

That said, Balloon.css is indeed a very useful solution if you are looking to add simple and pure CSS tooltips in your projects, and is well worth a spin.


Liked what you read?

Sign up for the Code Carbon Newsletter and receive weekly updates about new resources, tools as well as deals and discounts on awesome services.

One email per week; no spam, no nonsense; unsubscribe anytime.