Popover
A Popover can be used to display some content on top of another.
Things to know when using the Popover
component:
- The component is built on top of the
Modal
component. - The scroll and click away are blocked unlike with the
Popper
component.
Simple Popover
Anchor playground
Use the radio buttons to adjust the anchorOrigin
and transformOrigin
positions. You can also set the anchorReference
to anchorPosition
or anchorEl
. When it is anchorPosition
, the component will, instead of anchorEl
, refer to the anchorPosition
prop which you can adjust to set the position of the popover.
<Popover
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
The content of the Popover.
</Popover>
Mouse over interaction
This demonstrates how to use the Popover
component to implement a popover behavior based on the mouse over event.
Hover with a Popover.
Proyectos relacionados
Para usos más avanzados tal vez puedas aprovercharte de:
Ayudante PopupState
There is a 3rd party package material-ui-popup-state
that takes care of popover state for you in most cases.