Pure CSS tooltips

What is a tooltip?

Tooltip is a short message that appears when a user interacts with a specific element. Tooltips are used to give some information on how the website or the app works. In short, tooltips are text boxes that display a brief explanation of the elements.

Traditionally, tooltips appeared when the user hovered cursor over some elements. In this step-by-step tutorial you'll learn how to create this type of tooltips.

Try out a live demo below:

Let's get into it step by step

Step 1: Create a triggering element

There is no required markup for the tooltip in general. First of all create a triggering element. When the user mouse over this element'll be shown a tooltip message.

1<div class="tooltip">
2  {{ tooltip trigger }}
3</div>

1.tooltip {
2  position: relative;
3}

You can make as the triggering element anything you want. It can be a text, an icon, an card, etc. But don't forget to use position: relative; property. It needs for positioning the tooltip itself.

In the example below an information icon will be the triggering element.

Step 2: Create a tooltip message

Create a tooltip message inside the triggering element. You have to add absolute positioning to it because the triggering element class uses position:relative; which is needed to position the tooltip message relative to the tooltip element.

1<div class="tooltip">
2  {{ tooltip trigger }}
3  <div class="tooltip__message">
4    {{ tooltip message }}
5  </div>
6</div>

1.tooltip {
2  position: relative;
3}
4
5.tooltip__message {
6  position: absolute;
7}

You also can customize the tooltip message element whatever you want. Usually tooltips have a contrasting color relative to other design and have a little arrow pointing to the triggering element that the tooltip message is referring to. We'll cover it next in the fourth step.

Here's the result so far:

1.tooltip {
2  position: relative;
3
4  &:hover {
5    .tooltip__message {
6      opacity: 1;
7    }
8  }
9}
10
11.tooltip__message {
12  position: absolute;
13  opacity: 0;
14  transition: opacity 0.5s ease;
15  pointer-events: none;
16}

Let's make tooltips fancy!

Step 4: Customize

You may use additional classes to customize tooltips.

1<div class="tooltip tooltip--primary">
2  {{ tooltip trigger }}
3  <div class="tooltip__message">
4    {{ tooltip message }}
5  </div>
6</div>
7<div class="tooltip tooltip--secondary">
8  {{ tooltip trigger }}
9  <div class="tooltip__message">
10    {{ tooltip message }}
11  </div>
12</div>

1.tooltip {
2  position: relative;
3
4  &--primary {
5    {{ primary trigger style }}
6
7    .tooltip__message {
8      {{ primary message style }}
9    }
10  }
11
12  &--secondary {
13    {{ secondary trigger style }}
14
15    .tooltip__message {
16      {{ secondary message style }}
17    }
18  }
19}

In the example below you can see two variants of tooltip implemented by adding additional classes as described above. These additional classes are written in accordance with the BEM naming methodology, feel free to use your own style guide.

You can combine the techniques above in any fashion to change the position of the tooltip. Let's show the tooltip message on the right:

1<div class="tooltip tooltip--right">
2  {{ tooltip trigger }}
3  <div class="tooltip__message">
4    {{ tooltip message }}
5  </div>
6</div>

1.tooltip {
2  position: relative;
3
4    &--right {
5      .tooltip__message {
6        top: calc(50% - 14px);
7        right: -145px;
8      }
9  }
10}

In a similar way we can set another position by adding modifiers like tooltip--right. Use top, bottom, left, and right properties to set the placement of tooltip messages. Values in the example below are calculated based on my layout. Hover over the icons below to see the tooltips four directions in action: top, right, bottom, and left.

Conclusion

You can create tooltips in CSS without using JavaScript.

Read more

1. Tooltips in the time of WCAG 2.1
2. Tooltip guidelines
3. CSS triangle generator for styling tooltips