A popup anchored to a trigger element.
Wrap the element that opens the popover in Popover.Trigger. The trigger toggles the popover, positions it, gets the ARIA attributes it needs, and receives focus back when the popover closes.
Show code Hide code
import { Button, Popover } from '@mylighthouse/prism-react';
export default function BasicExample(): React.JSX.Element {
return (
<Popover>
<Popover.Trigger>
<Button buttonType="secondary">Open popover</Button>
</Popover.Trigger>
<Popover.Content aria-label="More information" side="bottom">
<div className="flex flex-col gap-300 p-400">
<p className="text-300--regular">
This is a popover with arbitrary content. Use it for contextual
actions or supplementary information.
</p>
<div className="flex justify-end">
<Popover.Close>
<Button buttonType="secondary" size="small">
Dismiss
</Button>
</Popover.Close>
</div>
</div>
</Popover.Content>
</Popover>
);
}Anchoring to another element
Popover.Content positions against the trigger by default. Pass anchor (a ref or element) to position it against something else. Without a Popover.Trigger, pass anchor; otherwise the popup has nothing to position against and stays invisible.
Accessibility
Popover.Trigger sets aria-expanded, aria-controls and aria-haspopup="dialog" on its element. If Popover.Content has role="menu" or role="listbox", set aria-haspopup="menu" or aria-haspopup="listbox" on the element inside Popover.Trigger; your value replaces "dialog".
Pass aria-label or aria-labelledby to Popover.Content to give the popup an accessible name.
API Reference
Popover
| Name | Default | Type | Description |
|---|---|---|---|
onOpenChange | -- | (open: boolean, eventDetails: PopoverRootChangeEventDetails) => void | -- |
open | -- | boolean | -- |
Popover.Content
| Name | Default | Type | Description |
|---|---|---|---|
anchor | -- | Element | VirtualElement | RefObject<Element> | (() => Element | VirtualElement) | Element the popup is positioned against. Defaults to the `Popover.Trigger`. Only needed when the popup should be anchored to something other than its trigger. Required when there is no `Popover.Trigger`. |
aria-label | -- | string | -- |
aria-labelledby | -- | string | -- |
id | -- | string | Id of the popup. Generated when omitted. With a `Popover.Trigger`, the trigger's `aria-controls` points to it. |
role | -- | "dialog" | "menu" | "listbox" | "tooltip" | "dialog"` (default) is used for popovers with generic interactive content such as a rich hover-card, a floating form, a date-picker, or a settings flyout. Use `"menu"` for a list of actions or commands (also set `aria-haspopup="menu"` on the trigger). Use `"listbox"` for a dropdown selection list. Use `"tooltip"` for plain, non-interactive text. |
side | -- | Side | -- |
sideOffset | -- | number | -- |
Popover.Close
No component-specific props
Popover.Trigger
No component-specific props