Displays rich content in a portal, triggered by a button.
A Popover is a non-modal dialog anchored to a trigger. Use it when the floating content must be interactive — forms, menus of actions, filters, settings.
Tooltip for a short, non-interactive label on a control (for example, the purpose of an icon-only button).HoverCard for a sighted-only preview of content that already lives behind a link.Popover is a non-modal dialog by default: focus moves into the content on open, Escape closes and returns focus to the trigger, clicking outside dismisses, and the page (body and any scroll containers) continues to scroll normally. Pass modal on Popover.Root to trap focus inside the content, block interaction with the rest of the page, and lock body scroll while the popover is open (the WAI-ARIA dialog pattern).
1import { Button } from "@ngrok/mantle/button";2import { Popover } from "@ngrok/mantle/popover";3 4<Popover.Root>5 <Popover.Trigger asChild>6 <Button type="button" appearance="filled">7 Open popover8 </Button>9 </Popover.Trigger>10 <Popover.Content preferredWidth="max-w-96">11 <p>Reprehenderit veniam excepteur incididunt et ut eu.</p>12 </Popover.Content>13</Popover.Root>;Compose the parts of a Popover together to build your own:
Popover.Root├── Popover.Trigger├── Popover.Anchor└── Popover.Content └── Popover.CloseThe Popover components are built on top of Radix Popover.
The root, stateful component that manages the open/closed state of the popover.
All props from Radix Popover.Root.
The button that toggles the popover.
All props from Radix Popover.Trigger.
The content to render inside the popover. Appears in a portal with styling and animations.
All props from Radix Popover.Content, plus:
An optional element to position the Popover.Content against. If not used, the content will position alongside the Popover.Trigger.
All props from Radix Popover.Anchor.
A button that closes an open popover.
All props from Radix Popover.Close.