Creating beautiful tooltips with only CSS

Have you seen those boxes with extra descriptions when you hover on a text?

Those are tooltips! Even thought it can seem intimidating to start creating your first tooltip, you actually only need to know basic CSS.

This article will show you how to create beautiful tooltips with only CSS.

First, let’s start with a <span> element with tooltip class and add an anchor text.

<span class="tooltip">Hover over me!</span>

Creating the tooltip

I promised only to use CSS — no additional HTML elements.

How can we create the tooltip in that way? If your guess was :before or :after pseudo elements, you are correct.

Where do you define the tooltip text? One might say to define directly in the content property of the pseudo elements.

However, it will make things more difficult to handle.

For example, if you need to add several tooltips, you’ll always need to add more CSS rules and define content. So, here we are going to use HTML custom data attributes to define the text.

Let’s add tooltip text as the data-text attribute to our tooltip span. (You can use whatever name prefixed by data-. Moreover, you can even drop the prefix in some cases.)

<span 
  data-text="Thanks for hovering! I'm a tooltip" 
  class="tooltip"
>Hover over me!</span>

Now, we can add CSS rules to style the container:

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}

Finally, we are going to create the tooltip text, which is positioned on the right side:

.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;

  display:none; /* hide by default */
}

content: attr(data-text) is the magic here. This takes the data-text attribute of the parent element and uses it as the content.

Tooltip text is positioned absolute, and it is relative to the .tooltip element.

Final rule: showing the tooltip text when hovering:

.tooltip:hover:before {
  display:block;
}

You just created your first tooltip! Next, let’s see how we can improve on this.

Positioning tooltips

In the above example, we positioned the tooltip on the right. But what if we want to put the tooltip in a different place? We can use additional classes to define other positions.

<span 
      data-text="Thanks for hovering! I'm a tooltip"
      class="tooltip left"
>Hover over me!</span>

CSS for the new class:

.tooltip.left:before {
  /* reset defaults */
  left:initial;
  margin:initial;

  /* set new values */
  right:100%;
  margin-right:15px;
}

You can use the same method to create classes for bottom and top positions. Additionally, you’ll need to reset the top value and override the transform value accordingly.

Adding arrows

Usually, CSS tooltips has arrows pointing towards the anchor text.

Thankfully, we have another pseudo element that can be used to make arrows.

Here’s the code for an arrow on a right-aligned tooltip:

.tooltip:after {
  content: "";
  position:absolute;
  
  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;
 
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
 
  /* the arrow */
  border:10px solid #000;
  border-color: transparent black transparent transparent;
  
  display:none;
}
.tooltip:hover:before, .tooltip:hover:after {
  display:block;
}

The trick here is to set a border. border: 10px solid #000; creates a border with 10px width.

Since we haven’t defined the width and height for .tooltip:after, width and height is equal to two times the border width:

What if we set the border color of each side to different colors?

border-color: blue black red green;

Guess what? Setting all colors to transparent except one side makes the arrow we need.

border-color: transparent black transparent transparent;

Why do we use margin-left:-5px?

When we set a border width to 10px, the total width become 20px. We use margin-left to position the arrow correctly (note that we used margin-left:15px in the tooltip).

How do we get rid of this annoying margin? Easy!

Set the border width to half of the tooltip’s left margin (7.5px in our case). I intentionally made it 10px to show you how to deal with the above situation. Now you’re familiar with both.

Creating arrows for other positions (left, top, and bottom) is done in the same way. Positioning them requires the same approach we used in .tooltip.left:before.

Animating the tooltip

A common animation to use for tooltips is the fade-in.

You can also use other animations like zoom-in or bounce, but I personally think they are too much for a tooltip.

Let’s see how to add fade-in animation to our CSS tooltip.

The best method would be to use opacity and transition. There are several advantages of using these instead of CSS animations.

First off, they’re easy to implement. Secondly, you won’t have to worry about fade-out animation —  opacity and transition does that for us.

Instead of setting display:none on the tooltip by default, we are going to use opacity:0. We’re going to set the transition time we need:

.tooltip:before {
  /* other styles */

  /*  display:none; */

  opacity:0;
  transition:.3s opacity;   
}

opacity:0 makes the tooltip transparent. Additionally, transition: .3s opacity tells the CSS engine to make a transition effect for 0.3 seconds when the opacity changes.

.tooltip:hover:before {
  opacity:1;
}

When you hover over the tooltip, opacity is set to 1 (fully visible). The browser will automatically create both fade-in and fade-out animations for you because we have already set an opacity transition.

You can add the same animation to the tooltip arrow:

.tooltip:after {
  opacity:0;
  transition:.3s;
}
.tooltip:hover:after {
  opacity:1;
}

Conclusion

In this article, we created a tooltip with only CSS (without extra HTML elements).

We used :before as the tooltip text and :after as the arrow. Now you understand that writing nested HTML elements below for simple tooltips isn’t necessary.

<span class="tooltip">
  Hover over me
  <span class="tooltip-text">
    Some tooltip text
  </span>
</span>

However, our approach has one downside: what if we need to add a link to the tooltip text?

<a> tags in the data-text attribute won’t be shown as a link, but as text. Therefore, if you need to include HTML in the tooltip you’ll need to have HTML tags like the above code.

Positioning, adding arrows, and animating those HTML tags is similar to what we did in this article. The only changes are:

• .tooltip:before becomes .tooltip-text
• tooltip:after becomes .tooltip-text:before or .tooltip-text:after.

In conclusion, we mainly used pseudo elements and content:attr() to create CSS tooltips. To add arrows, we used a trick with border. To animate it, we used opacity and transition.

The final result was a CSS-only tooltip.