Skip to contentSkip to content

FloatingPopup API

API reference docs for the React FloatingPopup component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import FloatingPopup from '@mui/material/FloatingPopup';
// or
import { FloatingPopup } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.



FloatingPopup — opt-in replacement for Popper.js-based positioning. Uses @floating-ui/react-dom under the hood.

Designed to be used via slots={{ popper: FloatingPopup }} on Autocomplete and Tooltip.

Props

Props of the native component are also available.

NameTypeDescription
arrowRef(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; }
| { current?: (props, propName) => { if (props[propName] == null) { return null; } if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } }

The arrow element to position. Preferred: pass the element from useState. Also works: RefObject (resolved lazily via Derivable pattern + useLayoutEffect).

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.