Skip to content

VPopover

Props

NameTypeDescription
alternatebooleanSets the color-scheme to alternate (dark/light)
anchorHTMLElementDirect reference to the popover's anchor element. Setting this overrides the slotted anchor.
arrowbooleanWhether to render the arrow tip.
dismiss-button-aria-labelstringOverrides the default Dismiss button's aria-label.
layoutEnum:
condensed
default
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
bottom
left
right
top-start
top-end
bottom-start
bottom-end
left-end
left-start
right-end
right-start
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() => void
anchorChanged() => void
arrowChanged() => void
hide() => void
openChanged(_oldValue: boolean,newValue: boolean) => void
placementChanged() => void
show() => Promise<void>
toggle() => void
updatePosition() => Promise<void>Updates the position of the popover