Tooltips using :before and :after

Confession: I love adding too many features to a website.  I always have to consciously remind myself that less is more.  Feature creep?  More like feature beast mode.  So when we launched the Rolling Lab site, I immediately wanted to add something.  Linen backgrounds?  Yes.  CSS3 Animations.  I want.  Canvas?  Moar (sic).  I decided against all of those ill-advised ideas, and settled on something that we can all agree on.  Hover tooltips.   The little things make the biggest difference, right?

So where do you start?  Well, you could just place a title attribute in certain links and call it a day.  But that would be so un-web 2.0, right?  Correct.  We could write some JavaScript.  And that would be fine, but you know what?  We can get away with something a little (in my opinion) better.  CSS3 and data attributes.  Data attributes are so HTML5 and hip and trendy.  So where do we start?

First off, why use the data attribute?  For me, it’s a way to eliminate an element.  For example, you could have a link wrapped around a span.  From there you could do some CSS to hide that span, position it relative to the anchor, and then use a :hover selector to show the span on a hover.  Not bad, I’d rather just have something like <a href="http://rollinglab.com" data-tooltip="Click Me To Go Home">Home</a>. So what that in mind, let’s get to a code block!

HTML

[html]<a href="https://twitter.com/paul_ruescher" class="tooltip icon twitter" data-tooltip="Twitter"></a>
<a href="https://github.com/paulruescher" class="tooltip icon github" data-tooltip="GitHub"></a>[/html]

CSS

[css].tooltip {
position: relative;
}
.tooltip:hover:before {
content: ‘ ‘;
position: absolute;
top: 28px;
left: 6px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #45C6F0;
}
.tooltip:hover:after {
content: attr(data-tooltip);
padding: 0 10px;
position: absolute;
top: 35px;
left: 0;
background: #45C6F0;
color: #FFF;
text-align: center;
text-indent: 0;
text-transform: capitalize;
line-height: 25px;
font-weight: bold;
white-space: nowrap;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}[/css]

Neat, right? The basics first. Our .icon class has position set to relative, so any children – our :before :after selectors – can be positioned relative to .icon. :before is our CSS triangle that points up and :after houses our tooltip. Everything within :after should be fairly straight-forward. The one key thing to note is content: attr(data-tooltip). It’s fairly self-explanatory: it takes the information within our previously set data-tooltip. Cool! I have this setup on our homepage for our social media icons in our biographies. Hover over the twitter icon in my bio and you should get a tooltip with the label ‘Twitter’.

It doesn’t take a lot of work, but I definitely like little details like this. Some icons – like GitHub – are not very obvious to everyone. But a quick hover, and you give your users a lot more information than they typically would receive.