Pure CSS Tooltips with HTML5 Data Attribute

The HTML5 data attribute can be used for a lot of things. For example as selectors in jQuery, setting values for a jQuery application and so on. In this tutorial we’re going to take a look at how can we use it to create awesome pure css tooltips. There are multiple ways you can create pure css tooltips, by using the title attribute on links or images and so on.

To create our tooltips, we’ll use the <span> element, with the class of tooltip and tooltip-top for example.

<span class="tooltip tooltip-top" data-tooltip="Hello, I'm on Top!">Tooltip on top</span>

We set the content we want on the tooltip inside the data-tooltip=”<– tooltip text –>” and then we wrap the word/phrase we want to tooltip for with the our span element.

Now that we have our tooltip html set up. We need to apply some CSS to make the tooltip appear when we hover over the specific word/phrase.

/* Some basic styling to notify users
   about the tooltips*/
.tooltip {
  color: #900;
  text-decoration: none;
}

.tooltip:hover {
  color: red;
  position: relative;
}

/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

And now, when you hover over the word/phrase a black box should appear above the word, with the text we set in the data-tooltip=””.

See the Pen waOwZv by Andor Nagy (@andornagy) on CodePen.

To move the tooltip box to the left, right or bottom, simply change the left, bottom css properties.

Tooltip on bottom

/* Tooltip on Bottom */
.tooltip-bottom[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

Tooltip on Right

/* Tooltip on Right */
.tooltip-right[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

Tooltip on Left

/* Tooltip on Left */
.tooltip-left[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  right: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

And there you go, you have your pure css tooltips. Of course you can play around with the style, which element you place it on, or which HTML Attribute you use as the content of your tooltip.

For example, you can use the title attribute aswell. All you’d need to do is change the span to an anchor ( <a href=””> ) tag and add a title attribute to it.

<a href="#" class="tooltip tooltip-top" title="This is my tooltip">Tooltip on Links</a>

And in the css, you’ll need to change the [data-tooltip] part of the selector to [title] and the content: attr(data-tooltip); property to content: attr(title);

/* Tooltip on Top */
.tooltip-top[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

And pretty much that is it. You can apply this concept to almost every element, and every html attribute.