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

{{“demo”: “BasicPopover.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.

{{“demo”: “AnchorPlayground.js”, “hideToolbar”: true}}

Mouse hover interaction

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

{{“demo”: “MouseHoverPopover.js”}}

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:

{{“demo”: “VirtualElementPopover.js”}}

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

• getBoundingClientRect
• DOMRect
• Node types

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.

{{“demo”: “PopoverPopupState.js”}}