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>
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.