A popover displays floating content anchored to a trigger element with automatic positioning and collision detection.
import { DialogTrigger, Popover, Button } from '@backstage/ui';
<DialogTrigger>
<Button>Open Popover</Button>
<Popover>
<div style={{ padding: '16px' }}>
<p>This is a popover</p>
</div>
</Popover>
</DialogTrigger>The trigger component that wraps both the trigger button and the popover content.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| isDisabled | boolean | - | No |
| delay | number | 0 | No |
| closeDelay | number | 0 | No |
| isOpen | boolean | - | No |
| defaultOpen | boolean | - | No |
| children | ReactNode | - | No |
The main popover component that displays floating content with automatic positioning.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| triggerRef | RefObject<Element | null> | - | No |
| isEntering | boolean | - | No |
| isExiting | boolean | - | No |
| placement | toprightbottomleft | - | No |
| containerPadding | number | 12 | No |
| offset | number | 8 | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Popoverbui-PopoverArrowbui-PopoverContent