WUI logo

Popover

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

version

4.1.2

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.

function() {
const popover = usePopoverState()
return (
<>
<Popover.Trigger as={Button} {...popover}>
Open Popover
</Popover.Trigger>
<Popover aria-label="usage popover" {...popover}>
<Popover.Content>
Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
aliquam nec, convallis sit amet erat. Mauris auctor blandit porta.
</Popover.Content>
</Popover>
</>
)
}

Title #

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

function() {
const popover = usePopoverState({ placement: 'top' })
return (
<>
<Popover.Trigger as={Button} {...popover}>
Open Popover
</Popover.Trigger>
<Popover aria-label="title popover" {...popover}>
<Popover.Title>Amazing title</Popover.Title>
<Popover.Content>
Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
aliquam nec, convallis sit amet erat. Mauris auctor blandit porta.
</Popover.Content>
</Popover>
</>
)
}

Close button #

withCloseButton show close button.

function() {
const popover = usePopoverState({ withCloseButton: true })
return (
<>
<Popover.Trigger as={Button} {...popover}>
Open Popover
</Popover.Trigger>
<Popover aria-label="close button popover" {...popover}>
<Popover.Title>Amazing title</Popover.Title>
<Popover.Content>
Praesent sit amet quam ac velit faucibus dapibus.<br />
Quisque sapien ligula, rutrum quis aliquam nec, convallis sit amet erat.<br />
Mauris auctor blandit porta.
</Popover.Content>
</Popover>
</>
)
}

Hover to open #

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

function() {
const popover = usePopoverState({ triggerMethod: 'hover' })
return (
<>
<Popover.Trigger as={Button} {...popover}>
Open Popover
</Popover.Trigger>
<Popover aria-label="hover to open popover" {...popover}>
<Popover.Title>Amazing title</Popover.Title>
<Popover.Content>
Praesent sit amet quam ac velit faucibus dapibus.<br />
Quisque sapien ligula, rutrum quis aliquam nec, convallis sit amet erat.<br />
Mauris auctor blandit porta.
</Popover.Content>
</Popover>
</>
)
}

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