Is it possible to target an existing DOM element as a Popover Anchor

[Sashkan]

Hi !

I was wondering if I could use a specific dom Element as a Popover Anchor, instead of using the Trigger/Anchor provided by the popover.

I'm working on a Table component, displaying a list of Rows.

Each row includes a button. When clicking on that button, I'd like to display a menu. Obviously, I don't want to re-render the menu component for each line, so instead, I wanted to create a Popover that would simply use the Row as its anchor.

At first, I thought of using a portal, but if I understand well, the Trigger/Anchor have to be inside of the Popover, which means that I cannot both wrap my Row as a Trigger/Anchor AND use it as portal ref.

It it possible to achieve this ? Or do I have to add a Popover for each Row ?

[jjenzz]

Obviously, I don't want to re-render the menu component for each line

Perhaps if we could see the design you are trying to achieve we can help a bit more but creating components for re-used parts of your UI would be the approach we would recommend. Something like this: https://codesandbox.io/s/magical-dirac-q1heu?file=/src/App.js

It's probably also worth mentioning that we have a DropdownMenu component intended for menus. It has built in accessibility for that use-case which the Popover will not handle. It can only be anchored to the Trigger at the moment though unfortunately.

[equal-matt]

Hey @jjenzz - hope you're still the one who might help with this... I can provide a concrete example, and I imagine that it abstracts fairly well to other scenarios as well. I'm hoping you might be able to point me in the right direction.

Problem

I am using a 3rd party library that handles a lot of things for me, but not everything. Something like fullcalendar. There's tight react integration, which is great, but for all intents and purposes it's a black box. We interface with it using the API provided. In this specific scenario, I want to show a popover when the mouseover event fires on a calendar item. The only information I have is the native js event or the DOM element.

[bryanmylee]

I'm building an onboarding system to guide a user through the platform with hints.

Sometimes, it would be really helpful to be able to pass a DOM reference or node directly to be used as the anchor because:

1. some components are blackboxes from third parties, and the only way to get the anchor is via query selectors.
2. adding <PopoverAnchor/> to our components mixes up the concerns for our custom components, which should not be concerned about the onboarding / hinting system.

I'd rather build the onboarding system without re-writing my application to place <PopoverAnchor/> everywhere.

[marcoms]

I'm also using fullcalendar and having the same problem. The current workaround is to create a separate fixed position element and track the location of the chosen date with .getBoundingClientRect() on an interval. Not the cleanest or most performant solution unfortunately

[alxrocha]

The PopoverAnchor accepts a virtualRef prop, might be what you're looking for. Something like this: https://codesandbox.io/s/black-sea-xzl2z2?file=/src/App.js.

[jamesamuel]

@alxrocha - Could you re-share this workspace please?