Tooltips without JavaScript

Here is some text with a tooltipI am a tooltip! Pretty sweet, huh?. Hover over the text to see a tooltip appear. This effect is accomplished without any JavaScript.

How did we do this?

It’s actually pretty simple. This technique uses the adjacent sibling selector:

span.tooltip {
  /* Position the tooltip just below the bottom of the screen */
  position: fixed;
  bottom: -50px;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;

  /* Naturally, we want a nice little transition effect */
  transition: bottom 0.5s;
}

span.has-tooltip:hover + span.tooltip {
  /* When the cursor hovers over the element *immediately before*
   * the tooltip, slide it up just into view */
  bottom: 0;
}

Of course, this only really works with fixed (or absolute) positioning; but the tooltip doesn’t need to go on the bottom of the screen. It could easily go on the rightSee? I told you I could go on the right!, for example.