Props

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 Built with Ariakit

Github

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.

Github

Close button

withCloseButton show close button.

Github

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

Github

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

Modal Tooltip