How To Build a Sticky CSS Tooltip (With a Bit of JavaScript)

How To Build a Sticky CSS Tooltip (With a Bit of JavaScript)

In this tutorial, we’ll build a CSS tooltip that sticks to our cursor and provides a more interactive experience to users.

 Here’s the final product:

info

HTML tooltips are an oft-used feature in websites. They provide extra context but only show up when an element is in focus or being hovered over, so they don’t clutter the page.

1. Creating the HTML Markup

Our markup requires two elements: the tooltip element and the tooltip-area used to trigger the display of the tooltip.

1	<div class="tooltip-area">
2	<h1>What is a tooltip?</h1>
3	<div id="tooltip" role="tooltip">
4	Hi! I'm a tooltip. I provide additional information about elements without cluttering the page.
5	</div>
6	</div>

For accessibility purposes, we’ll assign our tooltip element the tooltip aria-role.

2. Styling the CSS Tooltip

Displaying the tooltip will be handled by CSS only and is fairly straightforward. We’ll style the tooltip to be hidden by default and only displayed when the tooltip area is hovered over.

1	#tooltip {
2	opacity: 0;
3	}
4
5	.tooltip-area:hover #tooltip {
6	opacity: 1;
7	}

This is all the styling needed to handle the display of the tooltip. We can add some more CSS for design purposes.

1	.tooltip-area {
2	width: 50%;
3	min-width: max-content;
4	max-height: 75vh;
5	max-width: 75vh;
6	aspect-ratio: 1;
7	box-sizing: border-box;
8	padding: 18px 12px;
9	display: flex;
10	align-items: center;
11	justify-content: center;
12	background-color: white;
13	}
14
15	.tooltip-area h1 {
16	text-align: center;
17	}
18
19	#tooltip {
20	position: absolute;
21	height: fit-content;
22	max-width: 250px;
23	padding: 12px;
24	background-color: #FFFAA0;
25	top: 0;
26	left: 0;
27	opacity: 0;
28	pointer-events: none
29	}
30
31	.tooltip-area:hover #tooltip {
32	opacity: 1;
33	}

An important thing to note with our implementation is that since the tooltip will be following the position of the cursor, we’ll have to place it absolutely positioned to the body element and not the parent container.

Here’s what we have so far:

3. Updating Tooltip Position with JavaScript

Now we've set our tooltip element to display on hover, we can use JavaScript to update the tooltip position. This way our tooltip will move wherever the mouse cursor goes.

We’ll assign the position for our tooltip using the clientX and clientY mouse events.

Let’s create a function that handles updating the CSS tooltip position. First, we’ll get the tooltip element:

1	const tooltip = document.getElementById("tooltip");

And then we update its position in the updateTooltipPosition() function

1	const updateTooltipPosition = (event) => {
2	tooltip.style.top = `${event.clientY}px`;
3	tooltip.style.left = `${event.clientX}px`;
4	};

We can also include a condition to improve the tooltip’s responsiveness and ensure it doesn’t go outside the page boundaries. We can do this by ensuring that the top value is only updated if the tooltip height plus vertical cursor position is less than the window height:

1	const updateTooltipPosition = (event) => {
2	if (tooltip.offsetHeight + event.clientY < window.innerHeight) {
3	tooltip.style.top = `${event.clientY}px`;
4	}
5
6	tooltip.style.left = `${event.clientX}px`;
7	};

Thanks to our styling, we don’t need to worry about checking for the left boundary as the tooltip width will automatically reduce to fit the page width.

Now we’ve created our position function, we can use the onpointermove event listener to determine when the tooltip position should be updated.

We’ll update our HTML to attach our function to the event listener, inline on our tooltip area element:

1	<div class="tooltip-area" onpointermove="updateTooltipPosition(event)">

Conclusion

And that's that. We’ve created a mouse-bound CSS tooltip using a bit of JavaScript to help!