WUI logo

Popover

The Popover component is a small overlay that displays additional content or information when triggered by a user action, such as clicking or hovering over an element. It provides contextual information or interactive elements without navigating away from the current page. This component enhances user experience by delivering relevant content in a non-intrusive, easily accessible manner.

Source@welcome-ui/popoverBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { Popover, usePopover } from '@welcome-ui/popover'
import { Button } from '@welcome-ui/button'


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

Installation

1

Run the following command:

yarn add @welcome-ui/popover
2

Import component:

import { Popover, usePopover, PopoverHover, usePopoverHover } from '@welcome-ui/popover'

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.

PopoverHover

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

usePopover

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
ModalTooltip