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.

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

This demo demonstrates how to use the Popover component with mouseenter and mouseleave events to achieve popover behavior.

Hover with a Popover.

Virtual element

The value of the anchorEl prop can be a reference to a fake DOM element. You need to provide an object with the following interface:

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

Highlight part of the text to see the popover:

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.

For more information on the virtual element's properties, see the following resources:

:::warning The usage of a virtual element for the Popover component requires the nodeType property. This is different from virtual elements used for the Popper or Tooltip components, both of which don't require the property. :::

Supplementary projects

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

material-ui-popup-state

The package material-ui-popup-state that takes care of popover state for you in most cases.