Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes

Length:ShortLanguages:
This post is part of a series called Design and Build a Static Admin Bar .
Building a Static Admin Bar for the Browser

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.

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:

CSS:

## Tooltip Snippet: HTML5 Data Attribute

Here's the example which cleans up our markup, uses the HTML5 data-attribute to hold the value of our tooltip, and the css ::before pseudo-element to display it. Much neater.

HTML:

CSS: