BbPopover

External activator element or component ref. When provided, the activator slot is not rendered and click events are attached programmatically to the referenced element.

For a trigger that already exists elsewhere — a toolbar button, a table cell. The listeners and the ARIA are attached to that element directly, so there is nothing to spread and the activator slot is not rendered. Loosely typed in v2, ElementOrComponentRef in v3.

On mobile viewports (below config.mobileMaxWidth), render the popover as a bottom-anchored, auto-sized off-canvas sheet instead of a floating panel. The header, default and footer slots are forwarded to the sheet. The width prop is intentionally ignored in this mode (it means a different thing for a sheet); pass offCanvasProps to size or otherwise customise the sheet. When unset, falls back to the global config.adaptive.

Three-state on purpose: unset falls back to the plugin config (true out of the box), so most projects never pass it. The surface is decided when the panel opens and frozen until it closes.

Constrains the popover within a bounding element. When provided, the popover will not overflow this container's bounds (e.g. a sidebar). Accepts an HTMLElement, a Vue component ref, or a CSS selector string.

Keeps the flip and shift maths inside a container instead of the viewport — a sidebar, a scrolling card. Reach for it when the panel escapes a region it should stay inside, not as a default.

Disables the component.

Suppresses opening and marks the slot activator disabled. It does not close a panel that is already open — write false to the model for that.

Prevents rendering content before it's made visible.

The body is lazy: it renders on first open, so a query against the panel before then finds nothing. Turn this on to pre-measure a chart or to let a test read the panel while it is closed.

Selector for the element that receives focus after opening. Defaults to the first focusable element inside the popover.

A CSS selector resolved inside the panel. Worth setting when the first focusable element is not the one the reader came for — a header Reset button ahead of the body search field.

The identifier of the component.

Used by v-model to open / close the popover. A popover with no v-model starts closed and is driven by its trigger.

Props for the phone sheet. A pt inside it, object or colon keys, styles only that sheet. Overrides forwarded to the underlying BbOffCanvas when adaptive renders the sheet on mobile. Merged over the adaptive defaults (side: 'bottom', size: 'auto', draggable: true). Ignored when adaptive is false. A pt inside it styles ONLY the sheet, in BbOffCanvas's part words (root, header, title, description, content, footer, close; state open), object ({ pt: { header: '…' } }) or colon keys ({ 'pt:header': '…' }) alike. It merges after what this component forwards to its sheet, so it wins a conflict and drops nothing — see the passthrough guide § Inside the sheet.

The properties are BbOffCanvas's own — side, size, draggable, title — merged over the adaptive defaults. This is also the only way to size the sheet, since width is ignored in that mode.

Space the floating container will maintain from the activator.

Minimum empty space to keep from the edge of the page.

The gap from the edge of the page, not the panel's inner padding. That one is CSS on .bb-popover__content.

Position of the popover relative to the activator. Use 'cursor' to anchor at the mouse/touch coordinates. (BbPopover never draws an arrow — arrows are tooltip-only in v3.)

A v3 popover never draws an arrow, so the only thing 'cursor' changes is the anchor: the panel opens at the pointer instead of on the element. Pair it with trigger="contextMenu".

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Caps the popover height to the available viewport space and enables internal scrolling. Useful for tall content like filter panels. Not recommended for atomic popovers (calendars, color pickers).

Caps the panel at the space left for the resolved placement, after any flip. Right for a feed or a filter list; wrong for atomic content such as a calendar or a colour picker.

How long the transition has to last in milliseconds.

Interaction(s) that open the popover. Accepts a single trigger or an array to combine them. - 'click' — left-click / tap (default) - 'contextMenu' — right-click on desktop, long-press on mobile

contextMenu is right-click on a pointer and a 500ms long-press on touch. Pass an array to accept both gestures on the same trigger.

Width of the popover. Accepts pixels or percentage (relative to activator width).

Pixels, or a percentage of the trigger's width — only the percentage form re-measures when the trigger resizes. Ignored entirely by the adaptive mobile sheet.

The replacement for the template-ref show() / close() / isOpen v3 removed: write true or false, and the popover writes the model back on every dismiss. A leftover popoverRef.value.show() is undefined at runtime, not a compile error.

Fires after the panel has closed and focus is back on the trigger.

Fires after the panel is open and focus has moved inside — the safe point for anything that assumes focus has settled.

The element that triggers the popover to open. Spread props onto your trigger element.

Spread props onto your trigger or the popover has no anchor, no ARIA and no way to open. The scope also carries isOpen, placement and disabled so the trigger can react.

The popover body content rendered inside the floating panel.

The scope carries close, and v3 removed the built-in close button — so this is where a Cancel or Done control comes from. Commit first, then call it.

Content pinned to the bottom of the panel, outside the scroll region. Stays visible while the body scrolls (when scrollable) and carries its own padding and top divider, so footer actions need no negative-margin or sticky workarounds.

Content pinned to the top of the panel, outside the scroll region. Stays visible while the body scrolls (when scrollable) and carries its own padding and bottom divider, so a title or search field needs no negative-margin or sticky workarounds.