Skip to main content

Popover

Home > @backstage/ui > Popover

A popover component built on React Aria Components that displays floating content anchored to a trigger element.

Signature:

Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>

Remarks​

The Popover component supports multiple placements (top, right, bottom, left), automatic viewport-constrained scrolling, and conditional arrow rendering. It automatically handles positioning, collision detection, and ARIA attributes for accessibility. Content is automatically padded and scrollable when it exceeds available space.

Example 1​

Basic usage with DialogTrigger:

<DialogTrigger>
  <Button>Open Popover</Button>
  <Popover>
    <Text>Popover content</Text>
  </Popover>
</DialogTrigger>

Example 2​

With custom placement and no arrow:

<DialogTrigger>
  <Button>Open</Button>
  <Popover placement="right" hideArrow>
    <Text>Content without arrow</Text>
  </Popover>
</DialogTrigger>