Skip to content

PopoverContent ​

Overview ​

The floating content panel of a popover, rendered inside a portal. Positioned relative to the trigger or anchor element.

Theme entry: PopoverContent

Props ​

NameTypeRequiredDefaultDescription
themeOverrideObjectnullA partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
classimport('vue').HTMLAttributes['class']undefinedAdditional CSS classes to apply to the root element.
sidestringundefinedThe preferred side of the trigger to render against.
sideOffsetnumber4The distance in pixels from the trigger.
alignstring"center"The preferred alignment against the trigger.
alignOffsetnumberundefinedAn offset in pixels from the alignment edge.
avoidCollisionsbooleanundefinedWhen true, overrides side and align to avoid collisions with boundary edges.
collisionPaddingnumber|objectundefinedThe padding between the content and the boundary edge.
forceMountbooleanundefinedWhether to force mount the content.
stickystringundefinedWhen true, keeps the content in place relative to the trigger even when it overflows.
hideWhenDetachedbooleanundefinedWhen true, hides the content when the trigger is fully occluded.
asstring|objectundefinedForces content to render as a specific element.
asChildbooleanfalseWhen true, merges props onto the child element instead of rendering a wrapper.
trapFocusbooleanundefinedWhen true, prevents auto-focusing the first focusable element.

Slots ​

default ​

Slot.

Events ​

NameDescription
openAutoFocusEmitted when focus moves inside the content after it opens.
closeAutoFocusEmitted when focus returns to the trigger after the content closes.
escapeKeyDownEmitted when the Escape key is pressed.
pointerDownOutsideEmitted when a pointer-down event occurs outside the content.
focusOutsideEmitted when focus moves outside the content.
interactOutsideEmitted when any interaction occurs outside the content.

Full event reference

Source ​

client/lib/shell/popover/PopoverContent.vue