Skip to content

VPopover

Props

NameTypeDescription
alternatebooleanSets the color-scheme to alternate (dark/light)
arrowbooleanWhether to render the arrow tip.
dismiss-button-aria-labelstringOverrides the default Dismiss button's aria-label.
layoutEnum:
default
condensed
Sets the layout of the popover.
manualbooleanIf true, the popover uses manual dismissal (no light-dismiss). Adds a close button to the UI.
offsetnumberSets the offset between popover and the anchor element.
openbooleanIndicates if the popover is currently open. Can be set declaratively to open/close the popover. Automatically updates when the user dismisses the popover.
placementEnum:
top
right
bottom
left
top-start
top-end
right-start
right-end
bottom-start
bottom-end
left-start
left-end
The placement of the popover relative to the anchor.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
closeCustomEventFired when the popover closes.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
openCustomEventFired when the popover opens.

Slots

NameDescription
anchorSlot for the trigger element.
defaultDefault slot for the popover content.
footerUse the footer slot in order to add action buttons or other contents to the bottom of the dialog.

Methods

NameTypeDescription
_slottedAnchorChanged() => unknown
anchorChanged() => unknown
arrowChanged() => unknown
hide() => void
openChanged(_oldValue: boolean,newValue: boolean) => unknown
placementChanged() => unknown
show() => Promise<void>
toggle() => void
updatePosition() => unknownUpdates the position of the popover