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