How to create a tooltip with Tailwind CSS: JavaScript and Alpine.js

Yeah, you read that right, we are going to create a tooltip with Tailwind CSS, twice: first with vanilla JavaScript, then with Alpine.js. You could make one with plain CSS too, but let’s use a bit of script, just for the sake of learning how to do it.

What is a tooltip?

A tooltip is a small bubble of extra information that appears when the user hovers over an element. It explains a feature, adds context, or surfaces details without cluttering the page, a simple way to enhance the user experience.

Use cases

• Icon explainers: a quick answer to “what on earth does this button do?”
• Form field hints: guidance on what to enter, right where you need it.
• Charts and data: break a dense graph down into manageable pieces on hover.
• Error messages: explain what went wrong and suggest a fix, in place.

The markup

• id="tooltip-container": the parent element that wraps the button and the tooltip.
• id="tooltip-button": the button that triggers the tooltip.
• id="tooltip": the tooltip itself, hidden by default with style="display: none;".
• absolute: positions the tooltip absolutely, relative to the parent element.
• z-10: keeps the tooltip above all other elements on the page, so it’s always visible when the user hovers over the button.

Classes are omitted for brevity

<div id="tooltip-container">
  <button id="tooltip-button" type="button">Poke me</button>
  <div id="tooltip" class="absolute z-10" style="display: none;">
    <div role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <!-- Tooltip Content -->
    </div>
  </div>
</div>

The script

• document.addEventListener("DOMContentLoaded", () => {: waits until the page is loaded.
• showTooltip and hideTooltip: two tiny functions that flip the tooltip’s display between “flex” and “none”.
• tooltipContainer.addEventListener("mouseenter", showTooltip);: shows the tooltip when the mouse enters the container.
• tooltipContainer.addEventListener("mouseleave", hideTooltip);: hides it when the mouse leaves.

document.addEventListener("DOMContentLoaded", () => {
  const tooltipContainer = document.getElementById("tooltip-container");
  const tooltip = document.getElementById("tooltip");

  const showTooltip = () => (tooltip.style.display = "flex");
  const hideTooltip = () => (tooltip.style.display = "none");

  tooltipContainer.addEventListener("mouseenter", showTooltip);
  tooltipContainer.addEventListener("mouseleave", hideTooltip);
});

The Alpine.js version

Same component, no separate script: the state lives in x-data.

• x-data="{ open: false }": the tooltip starts hidden.
• @mouseover="open = true" and @mouseout="open = false": show and hide it as the mouse moves over the wrapper.
• x-show="open": displays the tooltip while open is true.
• class="relative" on the wrapper and absolute z-10 on the tooltip handle the positioning.

<div
  x-data="{ open: false }"
  @mouseover="open = true"
  @mouseout="open = false"
  class="relative"
>
  <button type="button" class="...">Poke me</button>
  <div x-show="open" class="absolute z-10 ...">
    <!-- Tooltip Content -->
  </div>
</div>

And here is the tooltip itself, positioned above the button with bottom-full:

<div
  x-show="open"
  class="absolute z-10 flex items-center justify-center w-56 h-20 mb-2 overflow-hidden text-center bg-orange-600 shadow-lg bottom-full rounded-md"
>
  <a href="#" class="block px-4 py-2 text-xl text-background">
    Hello, pomelo I am your tooltip!
  </a>
</div>

You can try the Alpine version separately: live demo and source code.

Which one should you use?

If Alpine is on the page, two event directives and an x-show do the whole job in the markup. If not, the vanilla version is a handful of lines. And remember, for simple cases you can create a tooltip with just Tailwind CSS and no JavaScript at all.

Conclusion

This is a super simple tooltip that you can drop into your project. Customize the content and style to fit your needs, and test it thoroughly to make sure it works as expected and is accessible to all users.

Hope you enjoyed this tutorial and have a great day!