Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

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.


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:

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:


Useful Resources

Advertisement