Popover

Displays rich content in a portal, triggered by a button.

Features

  • Can be controlled or uncontrolled.
  • Customise side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Focus is fully managed and customizable.
  • Dismissing and layering behavior is highly customizable.

Install the component from your command line.

Import the components and piece the parts together.

Create your styled popover component from the primitive parts.

Contains all the parts of a popover.

PropTypeDefaultRequired
defaultOpenbooleanNo default valueNot required
openbooleanNo default valueNot required
onOpenChangefunctionNo default valueNot required

The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

PropTypeDefaultRequired
asenumbuttonNot required

The component that pops out when the popover is open.

PropTypeDefaultRequired
asenumdivNot required
trapFocusbooleantrueNot required
onOpenAutoFocusfunctionNo default valueNot required
onCloseAutoFocusfunctionNo default valueNot required
disableOutsidePointerEventsbooleanfalseNot required
onEscapeKeyDownfunctionNo default valueNot required
onPointerDownOutsidefunctionNo default valueNot required
onFocusOutsidefunctionNo default valueNot required
onInteractOutsidefunctionNo default valueNot required
disableOutsideScrollbooleanfalseNot required
portalledbooleantrueNot required
forceMountbooleanNo default valueNot required
anchorRefrefNo default valueNot required
sideenum"bottom"Not required
sideOffsetnumber0Not required
alignenum"center"Not required
alignOffsetnumber0Not required
avoidCollisionsbooleantrueNot required
collisionToleranceboolean0Not required

An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the Popover.Content. Must be rendered inside Popover.Content.

PropTypeDefaultRequired
asenumsvgNot required
widthnumber10Not required
heightnumber5Not required
offsetnumberNo default valueNot required

The button that closes an open popover.

PropTypeDefaultRequired
asenumbuttonNot required

We expose a CSS custom property --radix-popover-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

Adheres to the Dialog WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the popover.
EnterOpens/closes the popover.
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
EscCloses the popover and moves focus to Popover.Trigger.