BbTooltip

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

Rarely what you want on a tooltip: v-bb-tooltip already attaches to an element without a wrapper and without a template ref. Reach for the prop when the trigger is owned by code you cannot annotate.

Space the arrow will maintain to the edge of the tooltip bubble. Useful when the floating element has border radius so it won't appear broken

How far the arrow stays from the corner of the bubble. Raise it when a rounded bubble makes the point look detached; it does nothing when hide-arrow is set.

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

Constrains the bubble to a container instead of the viewport — a scrolling sidebar, a table body. Positioning only: it does not clip the text.

The delay in milliseconds before the tooltip is shown.

Delays the open only. The close is always a short debounce so the pointer can travel from the trigger into the bubble, which is why this is not the prop for keeping a hint on screen longer.

Disables the component

Also dismisses a bubble that is already open, so it is safe to bind — the usual case being a hint that should stop firing once the same text is visible in the page.

Prevents rendering content before it's made visible.

The bubble is lazy and renders on first open. This matters less here than on BbPopover, because the text prop is written into an sr-only description at mount whether the bubble has opened or not.

Hides the tooltip arrow. A tooltip shows its arrow by default (it's the one popover-family surface where an arrow is meaningful — a speech bubble pointing at its anchor); set this to drop it.

The tooltip is the one surface in the popover family that kept its arrow in v3 — popovers, dropdowns, selects and the colour palette all lost theirs. Set this on a dense row where the point would land on a neighbouring control.

Seed for the tooltip's internal id. It is **prefixed** (bb_<id>) and set on the inner content element, not on the root — so document.getElementById(theIdYouPassed) finds nothing. Pass it to make the generated id stable (SSR snapshots, tests), not to look the element up.

Used by v-model to show / hide the tooltip. A tooltip with no v-model starts hidden and is driven by hover / focus.

Minimum empty space to keep from the edge of the page

Position of the overlay in respect to the related activator.

Flips itself near a viewport edge, so pick what reads best in the common case. Unlike BbPopover there is no 'cursor' value: a tooltip belongs to its trigger, not to the pointer.

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

Text content of the component.

The plain-text label, and the form that also produces the description at mount. Use the default slot instead only when the label needs markup.

How long the transition has to last in milliseconds

Visual variant. 'default' is the inverted (primary) bubble, 'destructive' is the danger-tinted bubble for warnings. Any other string is applied as a bb-tooltip--<name> class hook.

Typed against the registered names, so variant="info" is a compile error until info is added to tooltipVariants in the plugin config — and registering it gets you the type, not the CSS. default and destructive are the two that ship paint.

Caps the width of the tooltip bubble: it wraps at this measure but still shrinks to its text, so a short hint never sits in an oversized bubble. A bare number is read as pixels, a percentage is measured against the activator, and any other CSS length ('20rem', 'min(320px, 90vw)') is passed through. Replaces the default cap of 40ch, which is also reachable in CSS as --max-w on the tooltip root.

Pixels, or a percentage of the trigger. Without it a long hint stretches rather than wraps; only the percentage form re-measures when the trigger resizes.

New in v3, and rarely the right tool: a hint the application opens rather than the reader is usually a coach mark, which needs a panel the user can move into — BbPopover.

Replaces the default trigger element that opens the tooltip.

Spread props onto an element that can take focus. On a <span> the tooltip opens on hover only, which is the quietest accessibility bug on this component. The scope also carries open, placement and disabled.

Content rendered inside the tooltip bubble.

Markup is allowed and is flattened into one aria-describedby string. It does not make the bubble focusable: a link or a button in here is unreachable by keyboard, and that is BbPopover territory.