How to Make Native HTML Tooltips

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.


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:


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);
}
Copied to clipboard!

And that should position the tooltips for the right side. With everything put together, you should have the following effect on hover:

Hovering on tooltips

Summary

If you would like to get the full source code in one piece, I have it hosted on Codepen, you can clone it from there.

How to Make Native HTML Tooltips
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for HTML

Resources:

Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x