Popover

Popovers reveal contextual content close to a trigger without fully interrupting the current flow. They work well for quick settings, lightweight explanations, and compact supporting UI.

Basic Usage

Use a trigger plus content container for the most common contextual popover pattern.

Placement

Position the popover on the side that best matches the surrounding control.

Form Content

Use compact form controls when the interaction should stay close to the trigger.

With Arrow

with-arrow draws a floating-ui arrow aimed at the trigger. Works with any placement.

API

Slots

Name	Description
trigger	Popover trigger
(default)	Popover content

Attributes & Properties

Name	Description
anchor	Live element anchor — use when the target lives in another shadow tree (e.g. TipTap chips). Preferred over for / trigger slot when set. Stays in the consumer tree so modal showModal() inert does not apply (unlike portaling the panel to a root outside the dialog). Type Element | null Default null
flush	Drop default panel padding/fixed width so slotted content (command lists, etc.) can control its own inset. Consumer outer p-0 alone cannot reach .panel. Type boolean Default false
for	Anchor element id — alternative to the trigger slot. Type string
open	Type boolean Default false
placement	Type PkPopupPlacement Default bottom
sideOffset side-offset	Type number Default 4
withArrow with-arrow	Show a floating-ui arrow on the panel (off by default). Named like other optional controls (with-clear, with-caret) — tooltip always paints its own arrow and has no toggle. Type boolean Default false

Events

Name	Description
pk-open-change	—

CSS Parts

Name	Description	CSS selector
panel	Floating content panel	::part(panel)

Dependencies

This component registers the following elements when it loads.

Name	Description
pk-popup	—