1. Web Design
  2. CSS

Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes

Scroll to top
Read Time: 2 min
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.



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.



Useful Resources

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.