In this post, we’re going to create a basic tooltip using Tailwind CSS that looks like this:
This method requires no external libraries or packages.
Here’s the simplified code for that tooltip, without opinionated styling (background color, font size, etc):
<!-- Padding so you can see the tooltip. -->
<div class="group relative w-max">
class="pointer-events-none absolute -top-7 left-0 w-max opacity-0 transition-opacity group-hover:opacity-100"
This is a button.
- The tooltip is absolutely positioned above the button using the class
-top-7. You can mess with the value
7 to move its position.
- The whole thing is wrapped in the
group class, which allows us to use
group-hover: — that means that when anything in the “group” is hovered (the “group” only includes the button, because the span is absolutely positioned outside of the group), the span will show.
- I used opacity instead of
group-hover:block so we could have a nice fade-in with
- I used
pointer-events-none on the tooltip, which means that the mouse cannot interact with it at all — the tooltip’s text can’t be selected, etc.
- If you want the tooltip’s text to be selectable, you still want to use this class when the tooltip isn’t showing so the text isn’t selectable while invisible. In that case, use the two classes
- I used
w-max multiple times so elements, like the button’s area that can be hovered, would be exactly the necessary width.
If you want to play with this code in a sandbox, including the slightly styled version in the video above, I created a sandbox on Tailwind Play.