Popper Logo
Popper Logo
  • Home

Usage with ReactDOM.createPortal

Popper.js is smart enough to work even if the popper and reference elements aren't in the same DOM context.
This means that you can use ReactDOM.createPortal (or any pre React 16 alternative) to move the popper component somewhere else in the DOM.

Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, consider to support us on Open Collective!

This can be useful if you want to position a tooltip inside an overflow: hidden container that you want to make overflow.

Please note that you can also try strategy: 'fixed' to obtain a similar effect with less hassle.

import { usePopper } from 'react-popper';

const Example = () => {
  const [referenceElement, setReferenceElement] = React.useState(null);
  const [popperElement, setPopperElement] = React.useState(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement);

  return (
    <>
      <button type="button" ref={setReferenceElement}>
        Reference
      </button>
      {ReactDOM.createPortal(
        <div
          ref={setPopperElement}
          style={styles.popper}
          {...attributes.popper}
        >
          Popper
        </div>,
        document.querySelector('#destination')
      )}
    </>
  );
};
Edit this page
Render Props
© 2020 MIT License