Popover

Um Popover pode ser usado para exibir algum conteúdo em cima do outro.

Coisas para saber ao usar o componente Popover:

• O componente é construído sobre o componente Modal.
• A rolagem e o clique fora não é permitido, ao contrário do componente Popper.

A paleta com funções de estilo.

Basic 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>

Âncora - Exemplo interativo

Use os botões de opção para ajustar as posições anchorOrigin e transformOrigin. Você também pode definir anchorReference para anchorPosition ou anchorEl. Quando configurado com anchorPosition, o componente irá, ao contrário de anchorEl, basear se nas propriedades do anchorPosition, na qual você pode ajustar para definir a posição do popover.

<Popover 
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
>
  The content of the Popover.
</Popover>

Interação mouse em cima

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

Projetos Complementares

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

PopupState helper

Existe um pacote de terceiros material-ui-popup-state que cuida do estado popover para você na maioria das situações.

API

• <Grow />
• <Popover />