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.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!