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.

[lgtmrobo]

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 🤔

[cheryl-c-tirerack]

So... where's the arrow?

[stuikomma]

Are asking what we are calling "arrow" here? It is this caret that points to "Solutions"

[dagjomar]

Update: It seems the arrow is now gone from the documentation pages as well

[stuikomma]

I think it never was here, because this is the actual code example running.

But it still is here on the main page.

(screenshot with more context)

[functasti]

It would be helpful to have a basic tooltip arrow element included in the library to visually connect the PopoverPanel to the PopoverButton, similar to how Radix Primitives includes a <Popover.Arrow /> with their popover component.

[functasti]

Meanwhile, for anyone looking for a quick fix without using SVGs, here’s how I tackled it:

Under:

<PopoverPanel anchor={{ to: "bottom center", gap: "6px" }}>

Add this:

<div className="size-[calc(var(--spacing)*5*1.414/2)] mx-auto grid place-content-center translate-y-1/2">
  <div className="size-5 bg-blue-500 rounded-tl-xs rotate-45"></div>
</div>

Replace bg-blue-500 with your panel background color to have it blend in seamlessly.