How to Make Native HTML Tooltips

Ferenc Almasi • 2021 April 29 • 📖 4 min read

If you need to create simple tooltips, you can achieve what once was only possible with JavaScript. All you need is HTML with data attributes and some CSS:

<span data-tooltip="Showing on top">Top</span>
<span data-tooltip="Showing on right" data-position="right">Right</span>
<span data-tooltip="Showing on bottom" data-position="bottom">Bottom</span>
<span data-tooltip="Showing on left" data-position="left">Left</span>

Copied to clipboard!

We can use the data attributes to get the content of the tooltip, as well as use data-position to assign it a position that we can use through CSS.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.

Styling the Tooltip

For this to work, we will need to make use of the attr() function in CSS that is essentially supported for all major browsers. We are also going to use the ::before pseudo-element to add the tooltip through CSS. First, let's start with some default styles for the tooltip:

[data-tooltip] {
    position: relative;
    cursor: help;
    text-decoration: underline;
}

Copied to clipboard!

The tooltip itself will be positioned absolutely to the span. Because of this, we need to set its position to relative. The other two declarations are for decoration purposes and completely optional. Setting the cursor to help, will create a question mark next to your cursor once you hover over the element.

Using cursor: help — Moving to cursor: help;

For the content of the tooltip, we will use the ::before pseudo-element of the span. This is the whole CSS that will be used for the default tooltip that shows above the element:

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    width: 150px;
    display: block;
    background: #FFF;
    padding: 10px;
    top: -50px;
    box-shadow: 0px 2px 5px #0000008c;
    border-radius: 3px;
    text-align: center;
    left: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

Copied to clipboard!

I've highlighted the important parts. These are:

The content uses the attr function which takes in a data attribute. This will be used as the text of the tooltip.
We need to position it absolutely, above the original element.
Make sure you set z-index to make it appear above everything else.
By default, the tooltip should be hidden. We only want to show it once the user hovers over the element. For this, set the opacity to 0. pointer-events helps us to make the tooltip click-through, essentially making it unable for the user to interact with.
Lastly, transforming the tooltip on the Y-axis helps to create a slide in animation. This value will be overwritten with 0 on hover.

Animating on Hover

So how do we actually show the tooltip on hover? Really simple, we need to bring back the opacity to 1, and translate the ::before element back into its original position:

[data-tooltip]:hover::before {
    transform: translate(0);
    opacity: 1;
}

Copied to clipboard!

But that will only do it for showing the tooltip above the text. How about other directions? For that, we can use the data-position attribute as a selector, and change up the positions and transforms a little bit for each direction:

[data-position="right"]::before {
    top: -50%;
    left: 105%;
    transform: translateX(-20px);
}

[data-position="bottom"]::before {
    top: 150%;
    transform: translateY(-20px);
}

[data-position="left"]::before {
    top: -50%;
    right: 105%;
    left: auto;
    transform: translateX(20px);
}