WUI logo

Popover

Allows user to show more information on hover or click an element.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/popover

usage

import { Popover, usePopoverState } from '@welcome-ui/popover'

About #

Popover from Reakit with a really nice theme 👀

Usage #

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
onClose
() => void

call a function when popover closed

triggerMethod
"hover"
"click"

the method to open and close the popover

click
withCloseButton
Boolean

show or hide a close button

false

Packages #

Dependencies #
Peer dependencies #

Previous

Modal