DEV Community

Cover image for How To Make Tooltips.
F53
F53

Posted on

How To Make Tooltips.

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

HTML

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>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src="index.js"></script>
    </head>
    <body>
        <a tooltip="Example Tooltip Text A" href="www.example.com">A</a>
        <a tooltip="Different<br>Tooltip<br>Text" href="www.otherExample.com">B</a>
        <a tooltip="Really Cool Site" href="f53.dev">C</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

CSS

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

JS

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.id = "tooltip"
document.body.appendChild(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
    tooltip.style.top = mouseEvent.pageY+"px"
    tooltip.style.left = mouseEvent.pageX+"px"

    switch(mouseEvent.type) {
    case "mouseenter":
        // update text and show tooltip when we hover
        tooltip.innerHTML = this.getAttribute("tooltip")
        tooltip.style.visibility = "visible"
        break;
    case "mouseleave":
        // hide the tooltip when we are no longer above a tooltip element
        tooltip.style.visibility = "hidden"
        break;
    }
}
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)