Pop Over

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

Usage

Default


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

Props

Data table
	Type	Description
aria-describedby	string	Associates the popover content with an external description element ID.
aria-label	string	Accessible label for the popover content region.
aria-labelledby	string	Associates the popover content with an external label element ID.
aria-modal	boolean	Whether the popover should be announced as modal when role is dialog.
asChild	boolean	When true, the popover will clone the provided trigger element and attach popover behavior directly to it instead of wrapping it in an internal button.
className	string	Optional additional class name(s) for custom styling.
content	ReactNode	Content to be displayed inside the popover.
contentClassName	string	Optional additional class name(s) for the popover content element.
data-testid	string	Optional test ID for testing frameworks.
disabled	boolean	Disables interaction with the trigger and popover.
id	string	Optional ID for the popover content element.
placement	"left" \| "right" \| "top" \| "bottom"	Placement of the popover relative to the trigger element. One of: "top" \| "bottom" \| "left" \| "right"
rounding	RoundingType	Rounding of the popover content. One of: "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow of the popover content. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
state	StateType	State of the popover, for feedback styling. One of: "success" \| "error" \| "warning" \| "disabled" \| ""
theme	ThemeType	Theme for the popover styling. One of: "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"
trigger	ReactNode \| React.ReactElement<TriggerElementProps, string \| JSXElementConstructor<any>>	Trigger content for the popover. When `asChild` is false or omitted, this can be any renderable node and will be wrapped in an internal button element. When `asChild` is true, this should be a single interactive React element such as a button, link, or custom Button component so the popover can attach behavior directly to it without nesting buttons.
triggerAriaLabel	string	Accessible label for the trigger button or trigger element.
triggerTitle	string	Optional title attribute for the trigger element.