Popover

Requires JS

A component to display rich content within a portal.

githubstorybook

Usage

import { Popover, PopoverContent, PopoverTrigger } from "#/ui/components/Popover"
<Popover>
  <PopoverTrigger>Trigger</PopoverTrigger>
  <PopoverContent>Content</PopoverContent>
</Popover>

The popover requires PopoverTrigger, triggering the popover to display, and PopoverContent, what gets displayed.

<Popover>
  <PopoverTrigger>Show Popover</PopoverTrigger>
  <PopoverContent>Lorem ipsum dolor sit amet</PopoverContent>
</Popover>

You’re not limited to text content, you can pass in any valid JSX to either your Trigger or your Content.

Show Arrow

If you want to add an arrow to the popover, you can pass in showArrow to the PopoverContent component.

Show Close

If you want to add a close button to the popover, you can pass in showClose to the PopoverContent component. You can always close the popover by clicking away, but this makes the close action more explicit.
Notification Progress