Making Tooltips with CSS3

Recently we wanted to add some tooltips to the Quick Left Method page and I decided I wanted to avoid adding a Javascript plugin into the site's JS to accomplish this. One of our many focuses at Quick Left is performance and decreasing page load time/size is essential to that goal. So, I thought I'd explore the CSS3 route as it seemed quite achievable and even backwards compatible.

Quick points for those who scan: Support: Tested in Safari, Chrome, Firefox and it works as expected. Works back to IE8 (with bottom arrow, without transitions), IE7 (w/o arrow or transitions). Graceful Degradation (or Progressive Enhancement?) for the winnings! If its worth the trade-off for you, I highly recommend this method!

So, without further ado, CSS3 Tooltips – How-to and trip-me-ups (see 'em in action here:

The a tag code:

The relevant CSS:

.tooltip .tip-text {
  color: #FFF;
  height: auto;
  margin-left: -54px;
  margin-top: -25px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  width: 120px;

-webkit-backface-visibility: hidden;

-webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }

.ie8 .tooltip .tip-text, .ie7 .tooltip .tip-text { text-indent: -999em; }

.tooltip:hover .tip-text { border: 1px solid #161616; margin-top: -45px; opacity: 1; text-indent: 0em;

-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

background-color: #343434; }

.tooltip:hover .tip-text:after { border: 8px solid transparent; border-top-color: #1b1b1b; content: ' '; left: 45%; height: 0; position: absolute; top: 35px; width: 0; z-index: 105; }

.tooltip:hover .tip-text:before { border: 9px solid transparent; border-top-color: #161616; content: ' '; left: 44.3%; height: 0; position: absolute; top: 36px; width: 0; z-index: 100; }

You could select/copy/paste and roll out with lightweight tooltips from here and call it a day. But I have a couple of caveats to bring to your attention!

You can't apply CSS3 transitions to :before and :after pseudo elements, even though I feel like it should work fine, all browsers haven't implemented it. I ran down that road for awhile and Firefox and Chrome both stymied my hopes and dreams. In my experience they would just show/hide without any nice CSS3 transitions. I won't pretend this didn't make me sad because I wanted to use a title attribute on the anchor tag and call it a day instead of adding text inside the tag. I hope support for pseudo-element transitions comes through in all browsers soon!

Text elements after the tooltip element may flicker in Webkit (Safari only) on CSS transitioned elements. So, make sure to note that for Safari you need to add this style:

-webkit-backface-visibility: hidden;

on the element that has the transition in to prevent a flicker on elements following the hovered tooltips. Solution via Stack Overflow.

Let us know in the comments if this is useful to you or if you ran into any issues with this approach!