Loading...

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

question tailwind front-end
Ram Patra Published on September 19, 2024

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.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on September 19, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question react tailwindcss September 19, 2024 A simple React Tooltip component that uses TailwindCSS only (no libraries)

Here’s a React component that allows you to attach the tooltip to any element by passing it as a child. The component will render the tooltip and an arrow pointing downward.

question front-end tailwindcss February 17, 2024 How to center an element using Tailwind CSS?

In Tailwind CSS, you can center an element using flexbox utilities directly in your HTML markup. Here’s how you can center an element horizontally and vertically:

question tailwindcss front-end February 23, 2024 How to create a generic Dialog component in TailwindCSS that takes in title, description, etc. as props?

If you want to create a separate, generic Dialog component where you can pass in the title and description as props, you can do so by defining a reusable Dialog component. You can even pass HTML content in the description of the Dialog component, you can do so by utilizing React’s dangerouslySetInnerHTML attribute. Here’s how you can achieve this: