Tooltip component

[divine]

Hopefully this will be in a next release:

https://trello.com/c/KVOX3uCK/56-tooltips-popups

https://material-ui.com/components/tooltips/
https://vuetifyjs.com/en/components/tooltips/
https://vue.chakra-ui.com/tooltip
https://reakit.io/docs/tooltip/

---

Update: #436 (comment)

[ljcremer]

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

[sebastibe]

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.

[divine]

Any update on this?

[meotimdihia]

@RobinMalfait Sorry for pinging you.

[Psycarlo]

Any update?

[divine]

@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!

[suryarajendhran]

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

[DeamonDev]

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

[Psycarlo]

Pinging again. Would be awesome to see

[divine]

Tailwind's team doesn't seem to care about Headless UI anymore. It's been stuck without new components since the last update on July 7, 2021, and there have been no recent additions for two years.

Okay, that might have been a bit too harsh since it’s open source and do whatever you want, but what about TailwindUI customers who requested a tooltip? It was added to Trello and seemed to be one of the most requested features.

I remember when Tailwind Labs was small, and they fulfilled every customer request. Sadly, it seems that they have become too big to listen to customers.

Just my two cents.

[meotimdihia]

I think they intended to build in the catalyst template:

https://catalyst.tailwindui.com/docs

[imakeinternet]

Ping

[meotimdihia]

I think they intended to build in the catalyst template:

https://catalyst.tailwindui.com/docs

[meotimdihia]

I think they intended to build in the catalyst template:

https://catalyst.tailwindui.com/docs

[jacktsin1]

Although it's missing from there as well...

[bigperson]

Pinging here to keep the thread active.

[aschenkuttel]

+1

[Psycarlo]

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

[itsk3vin]

pinging to keep this active--this would be great

[arif-js]

PING!

[tomastrivino]

ping

[meotimdihia]

We should just switch to Shadcn.
I don't think headlessui team will do it. They haven't released a new component for 2 years.
Even catalyst is worse than Shadcn in its current state.

[imakeinternet]

I could not agree more with this statement.

[tomastrivino]

Regarding this, Shadcn recently released a new version including support for TailwindCSS V4.

[KeyboardRage]

Unfortunately Shadcn does not support Vue, from what I have seen

[Psycarlo]

Unfortunately Shadcn does not support Vue, from what I have seen

shadcn-vue
reka-ui

[ivan-kleshnin]

ShadCn is the same mess 😞

[jonathansolisc]

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>
  )

}

[seansean11]

After searching the code, I see that they do have a Tooltip component built, but have it commented out from being bundled. Does anyone know why they have not released this?

[ludwighogstrom]

Need this as well!

[Vondry]

@ludwighogstrom I am now using https://github.com/rezasohrabi/headless-tooltip and it works without any issues even with SSR :)

[ludwighogstrom]

@ludwighogstrom I am now using https://github.com/rezasohrabi/headless-tooltip and it works without any issues even with SSR :)

Thanks for the suggestion! We generally try to limit the number of libraries we use and prefer well-established packages for long-term stability. For now, we’re hoping Headless UI will add features that cover common UI needs.

[suuf]

May I also encourage uncommenting the tooltip 😁

[Psycarlo]

Nobody use this lib anymore.

reka ui for vue
and base ui for react

[rezasohrabi]

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 🙌