Popover

Un Popover se puede utilizar para mostrar un contenido encima de otro.

Cosas a saber cuando se utiliza el componente Popover:

El componente está construido sobre el componente Modal.
A diferencia del componente Popper, el desplazamiento y el clic están bloqueados.

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Abrir Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>El contenido del Popover.</Typography>
</Popover>

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Abrir Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>El contenido del Popover.</Typography>
</Popover>

Press Enter to start editing

Interacción del ratón

Esta demo muestra cómo utilizar el componente Popover con los eventos mouseenter y mouseleave para conseguir un comportamiento popover.

Pasar el ratón por encima con un Popover.

Elemento virtual

El valor de la proposición anchorEl puede ser una referencia a un elemento DOM falso. Necesitas proporcionar un objeto con la siguiente interfaz:

interface PopoverVirtualElement {
  nodeType: 1;
  getBoundingClientRect: () => DOMRect;
}

Resalte parte del texto para ver la ventana emergente:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

Para más información sobre las propiedades del elemento virtual, consulte los siguientes recursos (Inglés):

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

Popover

Popover básico

Interacción del ratón

Elemento virtual

API