FloatingPortal

Portals your floating element outside the main app node.

import {FloatingPortal} from '@floating-ui/react-dom-interactions';
 
function Tooltip() {
  return (
    <FloatingPortal>
      {open && <div>Tooltip<div>}
    </FloatingPortal>
  );
}

Don't conditionally render the FloatingPortal. Instead, conditionally render its children as seen above.

Props

interface Props {
  id?: string;
  root?: HTMLElement | null;
}

id

default: 'floating-ui-root'

If this node does not exist on the document, it will be created for you and will be appended to the end of the <body>.

<FloatingPortal id="custom-root-id">
  {open && <div>Tooltip</div>}
</FloatingPortal>

root

Alternatively, you may pass the root element itself, which supports shadow roots.

<FloatingPortal root={shadowRootNode}>
  {open && <div>Tooltip</div>}
</FloatingPortal>