Pop Over
The Pop Over component displays floating contextual content when a trigger element is clicked.
Usage
Default
<PopOver
trigger={<Button size="small">Toggle Popover</Button>}
content={
"This is some helpful info shown in a popover."
}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | - | Element that triggers the popover when clicked or focused. |
| content | ReactNode | - | Content shown inside the popover. |
| placement | "top" | "right" | "bottom" | "left" | "bottom" | Position of the popover relative to the trigger. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color variant for the popover. |
| state | "success" | "error" | "warning" | - | Optional state variant for emphasis. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the popover container. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Box-shadow for the popover container. |
| className | string | - | Custom class name for the popover container. |
| data-testid | string | "popover" | Test id for querying the component in tests. |