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.

Popover Simples

Â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

Este exemplo demonstra como usar o componente Popover para implementar um comportamento popover baseado no evento mouse over.

Hover with a Popover.

Projetos Complementares

Para situações de uso mais avançadas, você pode tirar proveito com:

PopupState helper