One reference, multiple floating components?

We want a button with these behaviors:

• on hover, displays its title in a tooltip;
• on click, opens an action menu.

So the button is a singular reference, triggered two different floating components – a tooltip and a drop-down menu – on its hover and click events, respectively.

Is this possible? Is there a best practice for this? Here’s what I’m thinking – in React – but I’m also wondering whether there’s a more efficient way to do this:

const {
  context: hoverContext,
  floating: hoverFloating,
  reference: hoverReference,
} = useFloating({ ...hoverConfig });

const {
  getFloatingProps: hoverGetFloatingProps,
  getReferenceProps: hoverGetReferenceProps,
} = useInteractions([
  useHover(hoverContext),
]);

const {
  context: clickContext,
  floating: clickFloating,
  reference: clickReference,
} = useFloating({ ...clickConfig });

const {
  getFloatingProps: clickGetFloatingProps,
  getReferenceProps: clickGetReferenceProps,
} = useInteractions([
  useClick(clickContext),
  useDismiss(clickContext)
]);

return (
  <div {...hoverGetReferenceProps}>
    <button {...clickGetReferenceProps}>Title</button>
  </div>

  <Portal>
    <div {...hoverGetFloatingProps}> ... </div>
    <div {...clickGetFloatingProps}> ... </div>
  </Portal>
);

[atomiks]

@EvHaus It’s because you aren’t forwarding all the props that the Menu passes to the Tooltip component into the prop getter. Since it clones its child element, which for the Menu is the Tooltip, those props need to be forwarded down.

You may also need to merge the children.props with them.

[S-Ladros]

same trouble when trying put Tooltip in Modal (both components got from the docs examples)