Popover

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

Props

maxWidth
string
Sets the maximum width of the popover container.
Defaults to 320px.
minWidth
string
Sets the minimum width of the popover container.
padded
boolean
Sets if the popover has padding. Use false when content needs to be flush with boundaries.
Defaults to true.
position
GoabPopoverPosition
Provides control to where the popover content is positioned.
Defaults to auto.
relative
boolean
This property has no effect and will be removed in a future version.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
maxWidth
string
Sets the maximum width of the popover container.
Defaults to 320px.
minWidth
string
Sets the minimum width of the popover container.
padded
boolean
Sets if the popover has padding. Use false when content needs to be flush with boundaries.
Defaults to true.
position
GoabPopoverPosition
Provides control to where the popover content is positioned.
relative
boolean
This property has no effect and will be removed in a future version.
testId
string
Sets the data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
borderradius
any
Border radius of the popover window.
Defaults to var(--goa-border-radius-m).
disabled
boolean
Disables the popover interaction. Used by parent components like Dropdown.
Defaults to false.
filterablecontext
boolean
Indicates the popover is used within a filterable context like a combobox.
Defaults to false.
focusborderwidth
any
Width of the focus outline border.
Defaults to var(--goa-border-width-l).
height
"full" | "wrap-content"
Controls the height behavior. 'full' stretches to parent height, 'wrap-content' fits content.
Defaults to wrap-content.
hoffset
any
Additional horizontal offset added to the popover's position.
maxWidth
string | "none"
Sets the maximum width of the popover container.
Defaults to 320px.
minwidth
string
Sets the minimum width of the popover container.
open
boolean
Controls the open state of the popover programmatically. Used by Dropdown, AppHeaderMenu.
Defaults to false.
padded
boolean
Sets if the popover has padding. Use false when content needs to be flush with boundaries.
Defaults to true.
position
"above" | "below" | "right" | "auto"
Provides control to where the popover content is positioned.
Defaults to auto.
relative
string
This property has no effect and will be removed in a future version.
tabIndex
number
Sets the tabindex. Use -1 to skip tabbing when a parent handles keyboard events.
Defaults to 0.
testId
string
Sets a data-testid attribute for automated testing.
Defaults to popover.
voffset
any
Additional vertical offset added to the popover's position.
width
string
Sets a fixed width for the popover container.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.

Events

_close
CustomEvent
_open
CustomEvent

Slots

target
Sets the element used as the popover trigger.
target
Sets the element used as the popover trigger.
target
Sets the element used as the popover trigger.
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs