BbHoverCard

External activator element or component ref. When provided, the activator slot is not rendered and the hover / focus listeners are attached programmatically to the referenced element.

For a card per row, v-bb-hover-card already attaches to an element without a template ref. Reach for the prop when the trigger is owned by code you cannot annotate.

Constrains the card within a bounding element: it stays inside it alongside its trigger (sideways for a card 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.

Milliseconds the pointer (or keyboard focus) rests on the activator before the card shows; longer than BbTooltip's, so passing over does not open it. Closing has a fixed grace (guide § Timing and the safe zone).

Holds the open back for hover and keyboard focus alike, with no skip for a neighbour reached quickly. Closing is not configurable: the card waits a fixed 200 ms, and a pointer travelling toward the card stays inside a safe zone.

Disables the component. Disabling an open card closes it.

Renders the card's content at mount instead of on the first open.

The activator's id (the card is bbhc_<id>, and is labelled by it once it holds a control). Generated when omitted.

Used by v-model to open / close the card. A card with no v-model starts closed and is driven by hover and keyboard focus.

Space the floating container will maintain from the activator.

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

Position of the card relative to the activator.

Flips itself near a viewport edge. Unlike BbPopover there is no 'cursor' value, and no arrow.

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. States: open.

The same parts as BbPopover minus the phone sheet: a hover card never turns into a bottom sheet.

Caps the card height to the available viewport space and enables internal scrolling.

How long the transition has to last in milliseconds.

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

Opens the card from elsewhere, a keyboard shortcut or a test. A click on the activator never toggles it, so this is the way when something other than hover must open it.

Emitted after the card is fully closed.

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

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

Emitted after the card is fully opened. Focus never moves on open.

Emitted with the new value whenever v-model changes.

The element the card describes. Spread props onto it; it must be focusable (a link or a button) so a keyboard user can open the card too.

Spread props onto an element that can take focus, usually the link the card previews. On a <span> keyboard users can never open the card.

The card body.

Content pinned to the bottom of the card, outside the scroll region.

The usual home for shortcuts. Each one must also exist on the page the activator links to: a touch screen never shows the card.

Content pinned to the top of the card, outside the scroll region.