Popper
The Popper component displays content on top of other content. The component API is an alternative to the react-popper and relies on a 3rd party library, Popper.js, for perfect positioning.
When you add a Popper component to a page, a Button component that controls the state of the Popper is automatically added for you. Other components, such as an Icon or Image, can also be used.
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| placement | auto-end auto-start auto bottom-end bottom-start bottom left-end left-start left right-end right-start right top-end top-start top | bottom | Defines the positioning of the component on the page. |
Popper Content
The Popper Content is the area within the Popper component that displays the content.
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | elevation outlined string | Defines the type of the component. | |
| square | bool | false | If true, rounded corners are disabled. |
| elevation | integer | Specifies a shadow applied to the surface, making the component appear raised above the surface. Valid values are 0-24. |
For more detail on the Popper component, see the MUI developer docs.