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>

useFloatingPortalNode

Exposes the portal container node for custom use in other components. The hook injects the node, if it does not yet exist in the DOM.

function App() {
  const portalNode = useFloatingPortalNode({
    id: 'custom-root-id', // 'floating-ui-root' by default
    enabled: false, // true by default
  });
 
  if (portalNode) {
    return ReactDOM.createPortal(<div></div>, portalNode);
  }
 
  return null;
}