GPopover

A flexible popover component built on the native Popover API with CSS anchor positioning. Exposes an activator slot to bind the trigger element.

Demo

Basic Usage

Interest mode

Using the mode prop, you can open popovers by hovering/focusing the activator by setting mode="interest"

Manual Registration

If you don't want to bind the activator with a slot for layout or other reasons, you can manually register the anchor style and popovertarget/interestfor attributes manually, or use templateRef to access the activatorBinding to connect an activator to a popover.

Position Area

GPopover is positioned using css anchor positioning's position-area property.

MDN docs

Offsets

You can use margins to offset popovers from their anchors. It will automatically flip when a position fallback is triggered.

Modeling Open

Popover Attribute

MDN docs

Nesting

Nested popovers don't close their parents when opened. They can all be closed at once by clicking outisde or closed sequentially in the reverse order they were opened by pressing escape.

This example anchors the popovers to their parent popover, rather than to their activator.

API

Props

Name	Type	Default	Required	Description
positionArea	any	"bottom"	No	The position area of the popover. This determines where the popover will be positioned relative to its anchor. See MDN for more details.
anchor	string | undefined	undefined	No	The anchor name of the popover. This can be used to anchor the popover to any element with a matching anchor-name style property. For example, if anchor="--my-anchor", the popover will be anchored to any element with style="anchor-name: --my-anchor".
minWAnchor	boolean | undefined	false	No	sets the minimum width of the popover to match the anchor
minHAnchor	boolean | undefined	false	No	sets the minimum height of the popover to match the anchor
mode	"click" | "interest" | undefined	"click"	No	switch between the popovertarget and interestfor attributes
popover	"auto" | "hint" | "manual" | undefined	"auto"	No	The popover attribute specifies the type of popover. See MDN for more details.
popovertargetaction	"toggle" | "show" | undefined	"toggle"	No	The popovertargetaction attribute specifies the action to perform when the popovertarget is activated. This attribute is only applicable when mode="click". See MDN for more details.
is	string | undefined	"div"	No
open	boolean | undefined		No

Slots

Name	Type	Description
activator	{ id: any; binding: { style: CSSProperties; interestfor: any; popovertarget?: undefined; popovertargetaction?: undefined; } | { style: CSSProperties; popovertarget: any; popovertargetaction: "toggle" | "show"; interestfor?: undefined; }; close: () => void | undefined; open: () => void | undefined; }
default	{ id: any; closeBinding: { commandfor: any; command: string; }; selfAnchorName: string; }

Events

Name	Type	Description
update:open	[value: boolean | undefined]

Exposed

Name	Type	Description
close	() => void | undefined
id	any
anchorName	string
selfAnchorName	string
activatorBinding	{ style: CSSProperties; interestfor: any; popovertarget?: undefined; popovertargetaction?: undefined; } |	use v-bind="activatorBinding" on the popover's activator to automatically set the correct attributes for the popover to work. This is especially useful if you have multiple popovers and want to avoid manually managing unique IDs and anchor names.