Перейти к контенту
Редактировать эту страницу

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

⚠️ Missing demo `pages/components/popover/SimplePopover.js` ⚠️

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.

anchorReference
 
anchorOrigin.vertical
transformOrigin.vertical
anchorOrigin.horizontal
transformOrigin.horizontal
<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.

Дополнительные проекты

Для более сложных вариантов использования вы можете воспользоваться:

PopupState helper

Существует сторонний пакет material-ui-popup-state, который, в большинстве случаев, заботится о состоянии всплывающего меню за вас.

API