Popover
Floating content anchored to a trigger.
Usage
Use the child snippet on Popover.Trigger to
render any element as the anchor. The content portals to <body> and closes on outside click or Esc. Use Popover.Close for an explicit dismiss action inside the panel.
Placement
The side prop sets the preferred placement. The popover auto-flips when
there is not enough space near a viewport edge.
Props
Popover.Root
| Prop | Type | Default |
|---|---|---|
children bits-ui | Snippet<[]> | undefined | — |
onOpenChange bits-ui A callback that is called when the popover's open state changes. | OnChangeFn<boolean> | undefined | — |
onOpenChangeComplete bits-ui A callback that is called when the popover's open state changes and the animation is complete. | OnChangeFn<boolean> | undefined | — |
open bits-ui The open state of the popover. | boolean | undefined | — |
Popover.Trigger
| Prop | Type | Default |
|---|---|---|
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
closeDelay bits-ui How long to wait before closing the popover after hover ends (ms). Only applies when `openOnHover` is `true`. | number | undefined | 300 |
id bits-ui | string | undefined | — |
openDelay bits-ui How long to wait before opening the popover on hover (ms). Only applies when `openOnHover` is `true`. | number | undefined | 700 |
openOnHover bits-ui Whether the popover should open when the trigger is hovered. | boolean | undefined | false |
ref bits-ui | HTMLElement | null | undefined | — |
Popover.Content
| Prop | Type | Default |
|---|---|---|
class | string | — |
align bits-ui The preferred alignment of the anchor to render against when open. This may change when collisions occur. | "start" | "center" | "end" | undefined | — |
alignOffset bits-ui An offset in pixels from the "start" or "end" alignment options. | number | undefined | — |
arrowPadding bits-ui This describes the padding between the arrow and the edges of the floating element. If your floating element has border-radius, this will prevent it from overflowing the corners. | number | undefined | — |
avoidCollisions bits-ui When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. | boolean | undefined | true |
child bits-ui | Snippet<[FloatingContentSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
collisionBoundary bits-ui A boundary element or array of elements to check for collisions against. | Arrayable<Boundary> | undefined | — |
collisionPadding bits-ui The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | 8 |
customAnchor bits-ui Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger. You can pass a selector string or an HTMLElement. | string | HTMLElement | Measurable | null | undefined | — |
dir bits-ui The text direction of the content. | Direction | undefined | — |
escapeKeydownBehavior bits-ui Escape behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to its parent component that has an escape keydown handler. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an escape key press. | EscapeBehaviorType | undefined | `close` |
forceMount bits-ui Whether to force mount the component. | boolean | undefined | — |
hideWhenDetached bits-ui | boolean | undefined | — |
id bits-ui | string | undefined | — |
interactOutsideBehavior bits-ui Interact outside behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an outside interaction. | InteractOutsideBehaviorType | undefined | `close` |
onCloseAutoFocus bits-ui Event handler called when auto-focusing on close. Can be prevented. | EventCallback | undefined | — |
onEscapeKeydown bits-ui Callback fired when escape is pressed. | ((e: KeyboardEvent) => void) | undefined | — |
onFocusOutside bits-ui Callback fired when focus leaves the dismissible layer. | ((event: FocusEvent) => void) | undefined | — |
onInteractOutside bits-ui Callback fired when an outside interaction event completes, which is either a `pointerup`, `mouseup`, or `touchend` event, depending on the user's input device. | InteractOutsideEventHandler | undefined | — |
onOpenAutoFocus bits-ui Event handler called when auto-focusing on open. Can be prevented. | EventCallback | undefined | — |
preventOverflowTextSelection bits-ui Passing `true` will prevent the overflow of text selection outside the element, provided the element is the top layer. | boolean | undefined | `true` |
preventScroll bits-ui Whether to prevent scrolling the body when the content is open. Whether to prevent body scrolling when the content is open. | boolean | undefined | true |
ref bits-ui | HTMLElement | null | undefined | — |
side bits-ui The preferred side of the anchor to render against when open. Will be reversed when collisions occur. | "top" | "right" | "bottom" | "left" | undefined | — |
sideOffset bits-ui The distance in pixels from the anchor to the floating element. | number | undefined | — |
sticky bits-ui | "partial" | "always" | undefined | — |
strategy bits-ui The positioning strategy to use for the floating element. | "absolute" | "fixed" | undefined | — |
trapFocus bits-ui Whether focus is trapped within the focus scope. | boolean | undefined | false |
updatePositionStrategy bits-ui "optimized" will only update the position when necessary, while "always" will update the position on each animation frame, which is useful if the floating content is following something like a mouse cursor. | "always" | "optimized" | undefined | "optimized" |
Popover.Close
| Prop | Type | Default |
|---|---|---|
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
Built on bits-ui — all underlying Bits UI Popover props are forwarded transparently.