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.
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.
open
boolean
Controls the open state of the popover programmatically. Used by Dropdown, 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).
filterablecontext
boolean
Indicates the popover is used within a filterable context like a combobox.
Defaults to
false.
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