◇

Popover

7 parts

A floating panel anchored to a trigger, used for rich, interactive content such as forms, settings, or detail cards that can hold focusable elements. Composed from a Trigger, an optional Anchor, a Portal, and Content (with an optional Arrow and Close). Positioning is handled by the underlying Popper. Root manages the open state and provides context to every part. Bind v-model:open to control it, or rely on the Trigger/Close for uncontrolled use. Non-modal by default; set modal to trap focus, lock scroll, and block outside pointer events. Reach for a Popover when you need interactive overlay content; use Tooltip for hover-only labels and Dialog for blocking, page-level tasks.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  PopoverRoot,
  PopoverTrigger,
  PopoverAnchor,
  PopoverContent,
  PopoverPortal,
  PopoverArrow,
  PopoverClose,
} from '@robonen/primitives/overlays/popover';

<PopoverRoot>
  <PopoverTrigger />
  <PopoverAnchor />
  <PopoverContent />
  <PopoverPortal />
  <PopoverArrow />
  <PopoverClose />
</PopoverRoot>

API Reference

PopoverRoot

Root

A floating panel anchored to a trigger, used for rich, interactive content such as forms, settings, or detail cards that can hold focusable elements. Composed from a Trigger, an optional Anchor, a Portal, and Content (with an optional Arrow and Close). Positioning is handled by the underlying Popper. Root manages the open state and provides context to every part. Bind `v-model:open` to control it, or rely on the Trigger/Close for uncontrolled use. Non-modal by default; set `modal` to trap focus, lock scroll, and block outside pointer events. Reach for a Popover when you need interactive overlay content; use Tooltip for hover-only labels and Dialog for blocking, page-level tasks.

Prop	Type	Default	Description
`defaultOpen`?	`boolean`	—	Uncontrolled initial open state. Ignored once `v-model:open` is bound.
`modal`?	`boolean`	`false`	Modal mode traps focus, locks scroll, and disables outside pointer events.
`open`?	`boolean`	—	Two-way bound value (`v-model:open`).

Emits

Event	Payload
`update:open`	`[value: boolean]`

PopoverTrigger

Trigger

The button that toggles the popover open and closed. Wires up `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, and (unless a custom Anchor is present) acts as the element Content is positioned against.

No props or events — renders its element and forwards attributes.

PopoverAnchor

Anchor

An optional alternate element to position Content against. Place it anywhere inside Root to anchor the popover to something other than the Trigger — the Trigger then only toggles open state and no longer drives positioning.

No props or events — renders its element and forwards attributes.

PopoverContent

Content

The floating panel itself — the positioned container for the popover's body. Renders only while open and picks a modal or non-modal implementation from the Root's `modal` setting: modal traps focus, locks body scroll, and blocks outside pointer events; non-modal does none of these. Emits focus and dismissal events so consumers can guard against closing.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Keep mounted for CSS exit animations.

PopoverPortal

Portal

Teleports Content out of the normal DOM flow (by default into `body`) so the popover renders above the rest of the page and escapes `overflow` and stacking contexts. Mounts its children only while the popover is open.

No props or events — renders its element and forwards attributes.

PopoverArrow

Arrow

An optional arrow that points from Content back toward the Trigger or Anchor, tracking the popover's resolved side and alignment. Place inside Content; pass custom SVG via the default slot to match your panel's styling.

No props or events — renders its element and forwards attributes.

PopoverClose

A button that closes the popover when activated. Place inside Content for an explicit dismiss control, such as an "X" in the corner or a "Done" button.

No props or events — renders its element and forwards attributes.