Pop Over

The Pop Over component displays floating contextual content when a trigger element is clicked.

Usage & Examples

Default

default.tsx

  <PopOver
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

Props API

21 props
Columns
Pop Over props API
Default
Description
aria-describedbystringNoaria—Associates the popover content with an external description element ID.
aria-labelstringNoaria—Accessible label for the popover content region.
aria-labelledbystringNoaria—Associates the popover content with an external label element ID.
aria-modalbooleanNoaria—Whether the popover should be announced as modal when role is dialog.
asChildbooleanNopropsfalseWhen true, the popover will clone the provided trigger element and attach popover behavior directly to it instead of wrapping it in an internal button.
classNamestringNostyling—Optional additional class name(s) for custom styling.
contentReactNodeYesprops—Content to be displayed inside the popover.
contentClassNamestringNoprops—Optional additional class name(s) for the popover content element.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseDisables interaction with the trigger and popover.
idstringNoprops—Optional ID for the popover content element.
placement"left" | "right" | "top" | "bottom"Noprops"bottom"Placement of the popover relative to the trigger element. One of: "top" | "bottom" | "left" | "right"