Popover

A small overlay that opens on demand, used in other components.

Related components: Dropdown, Header, Tooltip

Code examples

This is a popover

It can be used for a number of different contexts.

Click me

const target = (
  <GoAButton type="secondary" size="compact">
    Click me
  </GoAButton>
);

<GoAPopover target={target} >
  <p>This is a popover</p>
  It can be used for a number of different contexts.
</GoAPopover>

maxWidthstring

Sets the maximum width of the popover container. Defaults to 320px.

minWidthstring

Sets the minimum width of the popover container.

paddedboolean

Sets if the popover has padding. Defaults to true.

positionabove | below | auto

Provides control to where the popover content is positioned. Defaults to auto.

target

ReactNode

The target UI component to open the popover.

relativeboolean

Set to true if a parent element has a css position of relative. Defaults to false.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Design guidelines

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Popover

Component

A small overlay that opens on demand, used in other components.

Component

Properties