popover.md

Popover

Props

Name	Type	Default	Description
PaperProps	Object		Properties applied to the Paper element.
anchorEl	Object		This is the DOM element that will be used to set the position of the popover.
anchorOrigin	signature	{ vertical: 'top', horizontal: 'left',}	This is the point on the anchor where the popover's anchorEl will attach to. Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
children *	Node		The content of the component.
classes	Object		Useful to extend the style applied to components.
elevation	number	8	The elevation of the popover.
enteredClassName	string		The CSS class name applied while the component is entering
enteringClassName	string		The CSS class name applied while the component is entering
exitedClassName	string		The CSS class name applied when the component is exited
exitingClassName	string		The CSS class name applied while the component is exiting
onEnter	TransitionCallback		Callback fired before the component is entering
onEntered	TransitionCallback		Callback fired when the component has entered
onEntering	TransitionCallback		Callback fired when the component is entering
onExit	TransitionCallback		Callback fired before the component is exiting
onExited	TransitionCallback		Callback fired when the component has exited
onExiting	TransitionCallback		Callback fired when the component is exiting
onRequestClose	Function		Callback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback
open	boolean	false	If true, the popover is visible.
transformOrigin	signature	{ vertical: 'top', horizontal: 'left',}	This is the point on the popover which will attach to the anchor's origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)].
transitionDuration	union: number  'auto'	'auto'	Set to 'auto' to automatically calculate transition time based on height

Any other properties supplied will be spread to the root element.

CSS API

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

• paper

Have a look at overriding with classes section for more detail.

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiPopover.

Demos

• Popovers