This would be great. Another resource to look at:
https://github.com/Akryum/v-tooltip

I found this which seems to be based on headlessui: https://www.vechaiui.com/tooltip

Would be amazing to have something similar directly available from headlessui instead.

Any update on this?

@RobinMalfait Sorry for pinging you.

Any update?

@adamwathan sorry to bump you, this tooltip was in a TailwindUI Trello to-do list.

If you plan to add a tooltip, please just let us know. It's sad to use another library for showing only tooltip.

I hope it makes sense after 2 years.

Thanks!

Pinging here to keep the thread active. It would be really great to have the tooltip as part of headlessui

Pinging it too...Main competitor which is BaseUI have planned to add tooltip recently.

Pinging again. Would be awesome to see

Pinging here to keep the thread active.

+1

Just use https://www.radix-vue.com

pinging to keep this active--this would be great

PING!

ping

I've got a workaround for this, but it only works for tooltips whose trigger does not have/need an onClick event. For instance it will show the tooltip on hover but It won't fire the click event for links.

import { useRef } from "react";

export default function MyComponent(){
  const buttonRef = useRef(null);

  return (
  <Popover>
      {({ close }) => (
        <>
          <PopoverButton
            ref={buttonRef}
            className="cursor-pointer"
            onMouseEnter={() => buttonRef.current?.click()}
            onMouseLeave={() => close()}
          >
            Hover this to open tooltip
          </PopoverButton>

          <PopoverPanel
            anchor={position}
            className="ml-2 flex flex-col rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white shadow-xl"
          >
            This is the content of my tooltip!
          </PopoverPanel>
        </>
      )}
    </Popover>
  )

}

I recently ran into the tooltip limitation in Headless UI as well.

Changing my entire UI stack wasn’t an option, so I built something simple:
🎯 headless-tooltip — a minimal, accessible, and unstyled tooltip component for React.

🧠 Keyboard-accessible and screen reader friendly

🎨 No styling opinions (perfect with Tailwind/DaisyUI)

📦 Tiny, dependency-free, Headless UI-inspired

I made it specifically for cases like this where you want a tooltip that “just works” with Headless UI-style patterns.

Hope it helps someone here! Feedback and contributions welcome 🙌