How to create a tooltip with just Tailwind CSS (no libraries)?

This blog post shows you how you can create a simple tooltip with some text in it that shows up on hover. This solution only utilises the classes available in TailwindCSS. It doesn’t depend on any 3rd party libraries.

Here’s the code that will display a simple tooltip with an arrow pointing downwards:

<div class="relative group">
  <button class="px-4 py-2 bg-blue-600 text-white rounded">Hover me</button>
  
  <!-- Tooltip container -->
  <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block w-max bg-black text-white text-xs rounded px-2 py-1">
    Tooltip text here
    
    <!-- Arrow pointing down -->
    <div class="absolute left-1/2 -translate-x-1/2 top-full h-0 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-black"></div>
  </div>
</div>

Breakdown:

• Arrow Element: The div inside the tooltip creates the arrow.
  • h-0 w-0: Ensures the element has no intrinsic size.
  • border-l-4 border-r-4 border-t-4: Sets up the triangle using borders.
  • border-l-transparent border-r-transparent border-t-black: Makes the left and right borders transparent, while the top border is black, forming a downward-facing triangle that matches the tooltip’s background.

This will render the tooltip with a black arrow pointing downwards. The mb-2 class is used to ensure there’s enough space for the arrow, adjusting the distance between the button and the tooltip.

If you use React then you can make a Tooltip component out of this and use it with any element you want.