An accessible popup anchored to a button.
import {
Popover,
PopoverTrigger,
PopoverPopup,
PopoverTitle,
PopoverDescription,
} from "@/components/ui/popover";
<Popover>
<PopoverTrigger />
<PopoverPopup>
<PopoverTitle />
<PopoverDescription />
</PopoverPopup>
</Popover>;You can pass showArrow as true to PopoverPopup to show arrow on popover. By default, it is false.
You can pass side to PopoverPopup to change the side of the popover. By default, it is bottom.
By default, Popover opens when the trigger is clicked. You can pass openOnHover to PopoverTrigger to open it when the trigger is hovered.
You can pass delay to Popover to change the delay time for opening the popover. By default, it is 100ms.
<Popover>
<PopoverTrigger
openOnHover
delay={200}
>
...
</PopoverTrigger>
<PopoverPopup>
...
</PopoverPopup>
...
</Popover>You can also pass closeDelay of Popover to change the delay time for closing the popover. By default, it is 0ms.
<Popover>
<PopoverTrigger
openOnHover
closeDelay={200}
>
...
</PopoverTrigger>
<PopoverPopup>
...
</PopoverPopup>
...
</Popover>Note that These two properties will only be used when openOnHover is true.
The modal property of Popover controls how users can interact with the page when the popover is open.
modal={true} (default) -
Focus is trapped, scrolling is locked, and outside interactions are disabled.
modal={false} -
Users can interact with both the popover and the rest of the page freely.
modal="trap-focus" -
Focus is trapped for keyboard navigation, but scrolling and outside pointer interactions remain enabled.
You can pass sideOffset to PopoverPopup to change the offset of the popover. By default, it is 4.
TIP: If you want to use arrow on popover, make sure to keep sideOffset not less than 8.
This example shows how to use a custom trigger for the popover. It also uses the openOnHover prop to open the popover when the trigger is hovered.