Build a Simple Tooltip System in ES6
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.).
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:
<i class="fab fa-rebel tooltip" data-tooltip="Die rebel scum!"></i>
Let’s see how it’s done!
<label> element on every element that has the class
.tooltip. Let’s check out that code:
// Get an array of all items on the page with class 'tooltip'.
Simple, right? Only problem is, it’s not much of a tooltip just yet. It’s alway visible, and kind of in the way.
Let’s clean that up with some simple CSS!
Let’s have a look at that CSS code, first for the tooltipBubble element only.
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:
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:
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.
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.
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!