πŸŽ‰ We just launched a new HTML course! Get 3 courses with 33% off! πŸŽ‰
How to Make Native HTML Tooltips

How to Make Native HTML Tooltips

Ferenc Almasi β€’ 2021 April 29 β€’ πŸ“– 4 min read
  • twitter
  • facebook
πŸ“• HTML

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.
Master HTML

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);
}
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
Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTML

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:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundreds of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended