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>

CSS:

a.tooltip span {
	font-size: 10px;
	position:absolute;
	z-index: 999;
	white-space:nowrap;
	bottom:9999px;
	left: 50%;
	background:#000;
	color:#e0e0e0;
	padding:0px 7px;
	line-height: 24px;
	height: 24px;
	opacity: 0;
	transition:opacity 0.4s ease-out;
	}
a.tooltip span::before {
	content: "";
	display: block;
	border-left: 6px solid #000000;
	border-top: 6px solid transparent;
	position: absolute;
	top: -6px;
	left: 0px;
	}
a.tooltip:hover span {
	opacity: 1;
	bottom:-35px;
	}

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:

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

CSS:

a.tooltip::before {
	content: attr(data-tip) ;
	font-size: 10px;
	position:absolute;
	z-index: 999;
	white-space:nowrap;
	bottom:9999px;
	left: 50%;
	background:#000;
	color:#e0e0e0;
	padding:0px 7px;
	line-height: 24px;
	height: 24px;
	opacity: 0;
   	transition:opacity 0.4s ease-out;
	}
a.tooltip:hover::before	{
	opacity: 1;
	bottom:-35px;
	}

Useful Resources

• John Resig on HTML5 Data Attributes
• W3.org reference on HTML5 Data Attributes
• Dan Eden’s use of HTML5 Data Attributes for navigation nibbles
• Chris Coyier discussing transitions on css generated content