DEV Community

Cover image for How To Make Tooltips.

Posted on

How To Make Tooltips.


I wanted some tooltips for my website.

Problem was none of the online tutorials for tooltips actually behave like a tooltip, with the text following your mouse cursor.

I spent 3 hours figuring out how to make theme work the way I wanted.

I came up with something that:

  • is much simpler than every other tutorial
  • looks better than every other tutorial


Add a tooltip attribute to all the elements you want to have a tooltip.

The value of this attribute should be what you want the tooltip's text to be. You can use HTML here

<!DOCTYPE html>
        <link rel="stylesheet" href="style.css" />
        <script src="index.js"></script>
        <a tooltip="Example Tooltip Text A" href="">A</a>
        <a tooltip="Different<br>Tooltip<br>Text" href="">B</a>
        <a tooltip="Really Cool Site" href="">C</a>
Enter fullscreen mode Exit fullscreen mode

You are also going to need to link a javascript file somewhere


We need a very small amount of CSS to make our tooltip render right.

body {
    /* Required Stuff */
    position: relative;

    /* Styling that fits tooltip example styling */
    background: #1c1c1c;

#tooltip {
    /* Required Stuff */
    position: absolute;
    pointer-events: none;
    z-index: 100; /* anything higher than the highest z index you use */
    visibility: hidden;

    /* Example of how to style your tooltip */
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    color: white;
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
Enter fullscreen mode Exit fullscreen mode


The meat of this is in the javascript so I will be breaking it down slower here.

If you put the script in the header like I recommended then all your code needs to be wrapped in this

addEventListener('DOMContentLoaded', () => {
    // Everything
Enter fullscreen mode Exit fullscreen mode

We need to make our tooltip display and append it to the body

// Make our tooltip
let tooltip = document.createElement("span") = "tooltip"
Enter fullscreen mode Exit fullscreen mode

We add event listeners for all our elements that have a tooltip, calling a function that will handle everything

// add event listeners to elements that have a tooltip
document.querySelectorAll("[tooltip]").forEach(element => {
    element.addEventListener("mouseenter", updateTooltip)
    element.addEventListener("mouseleave", updateTooltip)
    element.addEventListener("mousemove", updateTooltip)
Enter fullscreen mode Exit fullscreen mode

Then we just need to make the function those event listeners were calling.

function updateTooltip(mouseEvent) {
    // Move tooltip to our current cursor position = mouseEvent.pageY+"px" = mouseEvent.pageX+"px"

    switch(mouseEvent.type) {
    case "mouseenter":
        // update text and show tooltip when we hover
        tooltip.innerHTML = this.getAttribute("tooltip") = "visible"
    case "mouseleave":
        // hide the tooltip when we are no longer above a tooltip element = "hidden"
Enter fullscreen mode Exit fullscreen mode

Conclusion and Demo

That is it!

You can play around with the code for this here

Top comments (0)