Popover
Note: This component requires you to have @headlessui/react installed. See this section on the Getting Started page.
Note: Popovers are often overused. They are generally useful when the information in the popover is supplementary and when it isn't pragmatic to place the info on the screen. Consider Nielsen Norman Group's guidelines before using a popover.
Note: Popovers are meant for larger amounts of content. If you have a smaller amount of content that you want to display after a user interaction, consider using the Tooltip component instead. [source]
import { Popover } from "rfui-package";Basic
<Popover content="Example content">Test</Popover>Direction
<Stack className="items-center gap-8 p-8">
<Popover direction="top" content="Example content">
<Button>Top</Button>
</Popover>
<Popover direction="right" content="Example content">
<Button>Right</Button>
</Popover>
<Popover direction="bottom" content="Example content">
<Button>Botton</Button>
</Popover>
<Popover direction="left" content="Example content">
<Button>Left</Button>
</Popover>
</Stack>Props
| Prop | Required | Default | Type and notes |
|---|---|---|---|
content | ✔ | - | |
direction | - | "right" | |
children | ✔ | - | |