Tutorial Details

• Topic: HTML5 + CSS
• Difficulty: Intermediate
• Screencast duration: 15 min

Download Source Files

Demo View It Online

This entry is part 3 of 3 in the series Static Admin Bar

• Design a Static Admin Bar in Photoshop
• Building a Static Admin Bar for the Browser
• 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.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

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:

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

CSS:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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:

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

CSS:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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;     }