Popover: Floating arrow on Popover

[karlwir]

Hi,

While migrating to 2.0 I realised theres no way to have an arrow pointing to the Popvers anchor.

In 1.x I used Popper.js to place my Popovers and could add an arrow myself with a modifier.

FloatingUi has similar functionality, https://floating-ui.com/docs/floatingarrow

Any plans on making it available in Headless UI?

Cheers!

[stuikomma]

The preview image on https://headlessui.com/ even suggests that there is an arrow, but there is no documentation on the topic.

I would appreciate an option in headless UI without adding extra libs.

[robitaille1]

Any luck?

[stuikomma]

No, I haven't attempted a custom implementation, yet.

[giero]

Today got the same problem :) I have Tooltip component based on Popover. For v1 I used to use https://headlessui-float.vercel.app/react/arrow.html, but now it's no longer supported.

Headless UI Float only support @headlessui/react v1, in the @headlessui/react v2 will direct using the anchor prop to positioning the Headless UI components, please reference the Headless UI Menu example to using the transition for menu or other components.

But now I have no idea how to add this arrow properly to v2 🤔