Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes

Tooltips are relatively simple to implement by just adding a bit of markup to your HTML and employing a bit of CSS. However, if you've never heard of HTML5 data attributes, you may want to check out this alternative (and much cleaner) approach.

Watch Screencast

If you've been following the Admin Bar series, this screencast should finish things off nicely. If you haven't been following along, don't worry; this screencast will teach you something you can use in all kinds of situations. We're going to look at a couple of options to get our tooltips up and running.

If, for some crazy reason, you'd rather not watch me demonstrate things, below are a couple of snippets to take away and play with. Note: these are simplified examples - you may want to add browser prefixes and additional styling etc.

Tooltip Snippet: Added Markup

The first example uses additional markup in the form of a <span> within our anchor. It works just fine, allows us to add a decorative 'point' to our tooltip, and is currently the safer option where browser compatibility is concerned.

HTML:

<a href="#" class="tooltip">This is the link<span>this is the tip!</span></a>