Build a Simple Tooltip System in ES6

8/13/2018 | Programming

Today, let’s look at how to build a simple, data-attribute-driven tooltip system from scratch with just some vanilla Javascript (ES6) and CSS.

What We’ll Be Making

Let’s look at an example of what we’re making. Hover over the icon below for an example (or checkout the “Stack” section on any of my portfolio items.).

Die rebel scum!

That fancy little popup bubble is called a “tooltip”, and is creating automatically from the data-tooltip attribute and a class of .tooltip. Here’s the markup from the above icon:

1<i class="fab fa-rebel tooltip" data-tooltip="Die rebel scum!"></i>

Let’s see how it’s done!

DOM Manipulation with Javascript

The neat thing about Javascript is that not only can it manipulating the existing elements on a page - it can create and remove them too! With that in mind, we’ll add a <label> element on every element that has the class .tooltip. Let’s check out that code:

1// Get an array of all items on the page with class 'tooltip'.
2const tooltipList = document.querySelectorAll('.tooltip')
3
4// Loop through that array
5tooltipList.forEach(function(el) {
6// Create a <label> element
7const tooltip = document.createElement('label')
8// Give it a class of 'tooltipBubble'
9tooltip.classList.add('tooltipBubble')
10// Set the text inside that element to be our 'data-tooltip' value
11tooltip.innerHTML = el.dataset.tooltip
12// Then insert it in the element we're on in the loop
13  el.appendChild(tooltip)
14})

Simple, right? Only problem is, it’s not much of a tooltip just yet. It’s alway visible, and kind of in the way.

Die rebel scum!Die rebel scum!

Let’s clean that up with some simple CSS!

Style Tips

Let’s have a look at that CSS code, first for the tooltipBubble element only.

1label.tooltipBubble {
2  position: absolute;
3  left: 50%;
4  transform: translate(-50%);
5  color: #fff;
6  font-family: 'Arial';
7  font-size: 12px;
8  background: #2b3534;
9  border-radius: 3px;
10  padding: 5px 10px;
11  bottom: 105%;
12  line-height: 1em;
13  pointer-events: none;
14}

Of course some of these styles are optional, like the font, the colors, etc. The main thing to look at is the way we’ve used absolute positioning to center it above the parent element, and be entirely above the element, setting the bottom property instead of top. Also notice we set pointer-events: none so that we can’t accidentally mouse over the tooltip and cause chaos.

For now, none of this positioning is correct, because it’s positioned absolutely to the body, not the parent. To fix that, we set the parent to be position: relative, like so:

1.tooltip {
2  position: relative;
3}

Using a little bit of CSS trickery, we can add a small caret underneath the tooltip to make it more like a cartoon speech bubble. It’s a neat trick using transparent borders and the :after pseudo-element to achieve this effect:

1label.tooltipBubble:after {
2  content: '';
3  display: block;
4  height: 0;
5  border-left: 5px solid transparent;
6  border-right: 5px solid transparent;
7  border-top: 5px solid #2b3534;
8  position: absolute;
9  top: 100%;
10  left: 50%;
11  margin-left: -2.5px;
12}

Now let’s have a go at some hover states to make them only appear when needed, and add some clean micro-interactions. First we need the tooltipBubble to start its life invisible. We’ll also give it some negative bottom margin and a transition.

1.tooltipBubble {
2  ...
3  margin-bottom: -.5em;
4  transition: .1s all linear;
5  opacity: 0;
6}

Now when we hover over an element with class tooltip, we’ll want the label child element to show, and reset its margin to 0, giving a nice fade-in-and-up effect.

1.tooltip:focus>label,
2.tooltip:hover>label {
3  opacity: 1;
4  margin: 0;
5}

And there we are! Just a simple, no-frills implementation of a tooltip system that’s easy to use, implement, and super lightweight.

What did I screw up? Angry, and want to take out your frustrations on random strangers on the internet? Hit the comment section below and scream about it!