Welcome UI - Popover

import { Button } from 'welcome-ui/Button'
import { Popover, usePopover } from 'welcome-ui/Popover'

const Example = () => {
  const popover = usePopover()

  return (
    <>
      <Popover.Trigger as={Button} store={popover}>
        Open Popover
      </Popover.Trigger>
      <Popover aria-label="usage popover" store={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>
    </>
  )
}

export default Example

Examples

Use usePopover, 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.

You can have a hover on Popover with PopoverHover and usePopoverHover from Popover.

We use usePopoverStore from Ariakit Popover for the state of the Popover and useHovercardStore from Ariakit Hovercard for the state of the PopoverHover.

Pass options to usePopover or usePopoverHover:

defaultOpen: e.g. const popover = usePopover({ defaultOpen: true })
withCloseButton: bool, show/hide cross to close popover

When you use usePopoverHover you can change:

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):

useState('open'): whether the popover is currently open
hide: a function to hide the popover