Popup
The Popup component is a utility that lets you display content in tooltips and popovers.
Popup API
Import
import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
// or
import { Unstable_Popup as Popup } from '@mui/base';Props of the native component are also available.
An HTML element, virtual element, or a function that returns either. It's used to set the position of the popup.
Type:HTML element
| object
| func
An HTML element or function that returns one. The container will have the portal children appended to it. By default, it uses the body of the top-level document object, so it's document.body in these cases.
Type:HTML element
| func
If true, the popup will be rendered where it is defined, without the use of portals.
Type:bool
Default:false
If true, the popup will exist in the DOM even if it's closed. Its visibility will be controlled by the display CSS property.
Otherwise, a closed popup will be removed from the DOM.
Type:bool
Default:false
Collection of Floating UI middleware to use when positioning the popup. If not provided, the offset and flip functions will be used.
Type:Array<false
| { fn: func, name: string, options?: any }>
Distance between a popup and the trigger element. This prop is ignored when custom middleware is provided.
Type:func
| number
| { alignmentAxis?: number, crossAxis?: number, mainAxis?: number }
Default:0
Determines where to place the popup relative to the trigger element.
Type:'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'
Default:'bottom'
The components used for each slot inside the Popup. Either a string to use a HTML element or a component.
See Slots API below for more details.
Type:{ root?: elementType }
Default:{}
The type of CSS position property to use (absolute or fixed).
Type:'absolute'
| 'fixed'
Default:'absolute'
If true, the popup will not disappear immediately when it needs to be closed but wait until the exit transition has finished. In such a case, a function form of children must be used and onExited callback function must be called when the transition or animation finish.
Type:bool
Default:false
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.