Popover
A small overlay that opens on demand, used in other components.
Props
testId
string
Sets a data-testid attribute for automated testing.
Defaults to
popover.
position
above | below | right | auto
Provides control to where the popover content is positioned.
Defaults to
auto.
maxWidth
string | none
Sets the maximum width of the popover container.
Defaults to
320px.
minwidth
string
Sets the minimum width of the popover container.
width
string
Sets a fixed width for the popover container.
height
full | wrap-content
Controls the height behavior. 'full' stretches to parent height, 'wrap-content' fits content.
Defaults to
wrap-content.
preventScrollIntoView
boolean
Prevents scrolling into view when focus trap is activated. Passed to FocusTrap.
Defaults to
false.
padded
boolean
Sets if the popover has padding. Use false when content needs to be flush with boundaries.
Defaults to
true.
tabIndex
number
Sets the tabindex. Use -1 to skip tabbing when a parent handles keyboard events.
Defaults to
0.
relative
string
This property has no effect and will be removed in a future version.
disableGlobalClosePopover
boolean
Prevents the popover from closing when other popovers open. Used for nested interactions.
Defaults to
false.
open
boolean
Controls whether the popover is open or closed. Used by parent components like AppHeaderMenu.
Defaults to
false.
disabled
boolean
Disables the popover interaction. Used by parent components like Dropdown.
Defaults to
false.
voffset
any
Additional vertical offset added to the popover's position.
hoffset
any
Additional horizontal offset added to the popover's position.
focusborderwidth
any
Width of the focus outline border.
Defaults to
var(--goa-border-width-l).
borderradius
any
Border radius of the popover window.
Defaults to
var(--goa-border-radius-m).
closeOnClickWithinBounds
any
When true, clicking inside the popover will close it.
Defaults to
false.
filterablecontext
boolean
Indicates the popover is used within a filterable context like a combobox.
Defaults to
false.
externalTarget
HTMLElement | null
An external element to use as the popover target instead of the slotted target.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Events
onOpen
(event: Event) => void
_open
CustomEvent
onClose
(event: Event) => void
_close
CustomEvent
Slots
target
Named slot for content