Last Updated: February 25, 2016

pseudo-element tooltip + transition

You thought it is not possible to use CSS transition in any other browser than Firefox? Then wake up and watch the jam session of Roman Komarov @Fronteers 2012 on how to use transition on pseudo-elements in almost every browser.

How does this work?

If you don't get what he's talking about in his video then I have an explanation for you:

HTML

<a href="#" 
    data-tooltip="This is a pseudo-element tooltip" 
    class="tooltip">
    Just a link with a tooltip
</a>

CSS

parent element (link) stuff

.tooltip {
  display: inline-block;
  overflow: hidden;
  height: 1.575em;
  transition: all .35s ease-in-out;

  /* 
   * the background-color of the pseudo-element:
   *
   * first value if not:hover
   * second value if :hover
   */
  background: linear-gradient(transparent 10%, rgba(130, 0, 0, .55)) no-repeat -1px;

  /* hide the background on the parent */
  background-position: -1px 0;
  background-size: 1px;

  /* hide the pseudo-element text */
  text-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

parent element on :hover

.tooltip:hover {
  /* show the pseudo-element text */
  text-shadow: 0 0 0 white;

  /* show the pseudo-element background */
  background-position: -1px 100%;
}

pseudo-element stuff

.tooltip:before {
  position: absolute;

  /* get the tooltip-text */
  content: attr(data-tooltip);

  /* styling */
  font-size:.75em;
  padding: .25em .45em;
  margin: -2em 0 0 -.25em;
  border-radius: 1em;
  pointer-events: none;

  /* hide the pseudo-element text */
  color: transparent;

  /* get the background of the parent element */
  background: inherit;
  background-size: 102% 90em;

  /* get the text-shadow of the parent element 
   * to show the pseudo-element on :hover */
  text-shadow: inherit;
}