Popover

Popover from Reakit with a really nice theme 👀

Install and import

Example

Use usePopoverState, Popover, Popover.Content and Popover.Trigger to create a simple Popover.

Title

Use Popover.Title props to create a predefined title block.

Close button

withCloseButton show close button.

Hover to open

Use triggerMethod='hover' on usePopoverState to open and close the popover by hovering it.

usePopoverState

We use usePopoverState from Reakit Popover for the state of the popover.

Pass options to usePopoverState :

  • visible: e.g. const popover = usePopoverState({ visible: true })
  • triggerMethod : click or hover
  • withCloseButton : `bool, show/hide cross to close popover

When triggerMethod is set to hover

  • showTimeout: number by default to 500, show after x milliseconds on hover the trigger
  • hideTimeout: number by default to 300, close after x milliseconds on mouse lease popover

And the hook returns (among other things):

  • visible : whether the popover is currently visible
  • hide : a function to hide the popover
  • for the others options, go to Reakit Popover

Properties

NameType(s)DefaultRequired
arrowStyle
object

add style to arrow

children
node
onClose
func

call an function when popover closed

triggerMethod
click
hover

the method to open and close the popover

click
withCloseButton
bool

show or hide a close button

false

Dependencies

Peer dependencies