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 (below config.mobileMaxWidth), renders as a bottom sheet instead of a floating panel, with the same header, default and footer slots. width is ignored there: size the sheet with offCanvasProps. Unset: 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: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. 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.

Renders the panel's content at mount instead of on the first open (the phone sheet's too).

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 activator's id (the panel is bbp_<id> and is labelled by it). Generated when omitted.

Makes the floating panel modal: the page behind is inert and does not scroll, and Tab stays inside. Off, it is a non-modal dialog: an outside click closes it and still lands, and tabbing out closes it. The phone sheet is modal either way.

Off by default: the page stays live, an outside click closes the panel and still reaches its target, and Tab past the last control closes it. Turn it on when the reader must finish or dismiss the panel first. The phone sheet is modal either way.

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 (the BbOffCanvas that adaptive renders on mobile), spread over its defaults. A pt inside it styles only the sheet (passthrough guide § Inside the sheet).

The properties are BbOffCanvas's own — side, size, draggable, title, hideClose — merged over the adaptive defaults. This is also the only way to size the sheet, since width is ignored in that mode, and the way to drop the sheet's × when your footer already closes.

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.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: content, footer, header, panel, root, sheet. States: open.

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.

Emitted after the popover is closed and focus has been restored to the activator.

Fires once the close transition has run and focus is back on the trigger, on both surfaces.

Emitted as soon as the popover starts to close (model becomes false).

Emitted as soon as the popover starts to open (model becomes true).

Emitted after the popover is fully opened and focus has been moved inside.

Fires once the open transition has run and focus has moved inside, on the floating panel and on the phone sheet alike: the safe point for anything that assumes focus has settled.

Emitted with the new value whenever v-model changes.

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 open, placement and disabled so the trigger can react.

The popover body content rendered inside the floating panel.

The scope carries close. The floating panel has no close button of its own (the phone sheet shows one), 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.