June 6, 2022
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="p-10">
<div class="group relative w-max">
<button>Click me!</button>
<span class="pointer-events-none absolute -top-7 left-0 w-max opacity-0 transition-opacity group-hover:opacity-100">
This is a button.
</span>
</div>
</div>
-top-7
. You can mess with the value 7
to move its position.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.hidden
and group-hover:block
so we could have a nice fade-in with transition-opacity
.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.
pointer-events-none group-hover:pointer-events-auto
.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.
Follow my twitter (@benborgers) to see the work-in-progress of coding projects Iām working on!