Skip to content


Portals your floating element outside the main app node.

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

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


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


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>}


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

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


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;