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.

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</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.

Mouse over interaction

This demo demonstrates how to use the Popover component and the mouseover event to achieve popover behavior.

Complementary projects

For more advanced use cases, you might be able to take advantage of:

PopupState helper

There is a 3rd party package material-ui-popup-state that takes care of popover state for you in most cases.

Popover

Basic Popover

Anchor playground

Mouse over interaction

Complementary projects

PopupState helper

API