Pop Over

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

Usage & Examples

default.tsx


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

Pop Over props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Associates the popover content with an external description element ID.
`aria-label`	`string`	No	aria	`—`	Accessible label for the popover content region.
`aria-labelledby`	`string`	No	aria	`—`	Associates the popover content with an external label element ID.
`aria-modal`	`boolean`	No	aria	`—`	Whether the popover should be announced as modal when role is dialog.
`asChild`	`boolean`	No	props	`false`	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`	No	styling	`—`	Optional additional class name(s) for custom styling.
`content`	`ReactNode`	Yes	props	`—`	Content to be displayed inside the popover.
`contentClassName`	`string`	No	props	`—`	Optional additional class name(s) for the popover content element.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Disables interaction with the trigger and popover.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Adds translucent glass styling to the floating popover content.
`id`	`string`	No	props	`—`	Optional ID for the popover content element.