With pseudo elements, the triangle hack, and data attributes, I created a simple tooltip system in HTML and CSS.

To give any element a tooltip, simply add the data-tooltip attribute to it, like so:

<a href="#!" data-tooltip="I am a tooltip">I am a link</a>

One caveat with this method is that transitions on pseudo elements don’t quite work right in Webkit browsers (Chrome, Safari). It works just fine in Firefox, but if you include the CSS for the transition it will break the tooltip in Webkit, which is annoying. This means you can’t transition the opacity or positioning of the tooltip for a fade or movement effect. But if you don’t care about that extra pizazz, then this method will work just fine.

Bonus!

Because boredom, I created a simple directional tooltip system. With class names, you can specify which side you would like the tooltip to appear (top, right, bottom, or left).