Popover

Popover can be used to display some content on top of another.

Basic Popover

To show this type of Cards you will need this code in down here.

     
<Button variant="raised" color="primary" id="Popover1" onClick={this.toggle}>
        Launch Popover
</Button>
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
        <PopoverHeader>Popover Title</PopoverHeader>
    <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
         lacinia quam venenatis vestibulum.
    </PopoverBody>
</Popover>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
action	func		This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action. Signature: function(actions: object) => void actions: This object contains all posible actions that can be triggered programmatically.
anchorEl	union: object |  func		This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover.
anchorOrigin	{horizontal?: union: number |  enum: 'left' |  'center' |  'right' , vertical?: union: number |  enum: 'top' |  'center' |  'bottom' }	{ vertical: 'top', horizontal: 'left',}	This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'. Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
anchorPosition	{top?: number, left?: number}		This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area.
anchorReference	enum: 'anchorEl' |  'anchorPosition' |  'none'	'anchorEl'
children	node		The content of the component.
classes	object		Useful to extend the style applied to components.
container	union: object |  func		A node, component instance, or function that returns either. The container will passed to the Modal component. By default, it's using the body of the anchorEl's top-level document object, so it's simply document.body most of the time.
elevation	number	8	The elevation of the popover.
getContentAnchorEl	func		This function is called in order to retrieve the content anchor element. It's the opposite of the anchorEl property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element.
marginThreshold	number	16	Specifies how close to the edge of the window the popover can appear.
onClose	func		Callback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback.
onEnter	func		Callback fired before the component is entering.
onEntered	func		Callback fired when the component has entered.
onEntering	func		Callback fired when the component is entering.
onExit	func		Callback fired before the component is exiting.
onExited	func		Callback fired when the component has exited.
onExiting	func		Callback fired when the component is exiting.
open *	bool		If true, the popover is visible.
PaperProps	object		Properties applied to the Paper element.
transformOrigin	{horizontal?: union: number |  enum: 'left' |  'center' |  'right' , vertical?: union: number |  enum: 'top' |  'center' |  'bottom' }	{ 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)].
TransitionComponent	union: string |  func	Grow	Transition component.
transitionDuration	union: number |  {enter?: number, exit?: number} |  enum: 'auto'	'auto'	Set to 'auto' to automatically calculate transition time based on height.
TransitionProps	object		Properties applied to the Transition element.