Popover
Popover shows a floating panel next to its trigger. It is the base of every pop-up component in raft-ui (Tooltip, Popconfirm, Popselect, Dropdown). Positioning, dismissal and nesting come from Floating UI.
Demos
Trigger
trigger is hover (the default), click, focus or manual. A hover popover also opens on focus for keyboard users and on tap on touch screens. manual opens and closes only through show.
Placement
Twelve placements: a side, then -start or -end to align with that edge of the trigger. Without room the popover flips to the other side (flip={false} turns that off) and shifts to stay on screen.
Header and footer
header and footer add rows above and below the content, divided by a line. When the popover is capped (by the room it has, or a maxBlockSize in contentStyle), only the content scrolls, with ScrollArea’s scrollbar; the header and footer stay put.
Arrow and width
showArrow={false} drops the arrow. width sets a width in px, or trigger to match the trigger.
Nested
A popover opened from inside another one belongs to it: clicking the inner popover doesn’t close the outer one, and Escape closes the innermost first.
At a point
With x and y the popover opens at a viewport point and needs no trigger, for context menus and the like.
Raw
raw drops the surface (background, border, padding, arrow) and keeps positioning and motion, for content that draws its own.
Near the edges
Wherever the trigger sits, the popover stays on screen and never adds scrollbars to the page: it flips to the other side (or across, when neither fits), slides along the edge while the arrow keeps pointing at the trigger, and when it is bigger than the room it has, its content scrolls. Try the four corners of this box, and resize the window.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
children | ReactElement | string | undefined | The trigger: one element, which receives the popover’s ref and handlers. Text is wrapped in a span. | Unreleased |
content | ReactNode | () => ReactNode | undefined | The popover’s content. A function is only called while the popover renders. | Unreleased |
header | ReactNode | undefined | A row above the content. | Unreleased |
footer | ReactNode | undefined | A row below the content. | Unreleased |
trigger | hover | click | focus | manual | hover | What opens it. | Unreleased |
show | boolean | undefined | Controlled visibility. | Unreleased |
defaultShow | boolean | false | Initial visibility when uncontrolled. | Unreleased |
onUpdateShow | (show: boolean) => void | undefined | Called when the popover wants to open or close. | Unreleased |
placement | PopoverPlacement | top | Side and alignment. | Unreleased |
delay | number | 100 | Milliseconds before a hover opens it. | Unreleased |
duration | number | 100 | Milliseconds before leaving closes it. | Unreleased |
keepAliveOnHover | boolean | true | Stay open while the pointer moves onto the popover. | Unreleased |
showArrow | boolean | true | Show the arrow. | Unreleased |
flip | boolean | true | Flip to the other side when there is no room. | Unreleased |
width | number | 'trigger' | undefined | Width in px, or the trigger’s width. | Unreleased |
x / y | number | undefined | Open at a viewport point instead of next to the trigger. | Unreleased |
disabled | boolean | false | Never open. | Unreleased |
to | string | HTMLElement | false | undefined | Where to mount. Defaults to ConfigProvider’s portalContainer, then document.body; false renders in place. | Unreleased |
zIndex | number | undefined | A fixed z-index. By default each layer stacks above the ones opened before it. | Unreleased |
raw | boolean | false | Drop the built-in surface. | Unreleased |
keepMounted | boolean | false | Keep it in the DOM, hidden, after it closes. | Unreleased |
onClickoutside | (event: Event) => void | undefined | Called on a press outside the trigger and the popover. | Unreleased |
contentClassName | string | undefined | Class of the popover surface. | Unreleased |
contentStyle | CSSProperties | undefined | Style of the popover surface. | Unreleased |
Any other prop, and ref, goes to the trigger, merged with the trigger’s own (event handlers both run). That is also how popovers nest on one element: an outer popover’s handlers pass through the inner one.
The popover is a non-modal dialog linked to its trigger with aria-expanded and aria-controls. While open it stacks above every layer opened before it; the theme follows it into the portal.