BbTooltip

External activator: an HTMLElement, a Vue component ref, or a CSS selector string (looked up in the document once the tooltip mounts). 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: it stays inside it alongside its trigger (sideways for a tooltip 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.

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

Milliseconds a pointer rests on the activator before the tooltip shows (0: at once). Keyboard focus shows it at once, and so does a pointer arriving while another tooltip shows or within 300 ms of one closing.

Delays the hover open only (100 ms by default): keyboard focus opens at once, and a tooltip reached within 300 ms of another one closing skips the wait. 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.

Renders the tooltip's popover and content at mount instead of on the first open. The description screen readers hear exists from mount either way.

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.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: panel, root. States: default, destructive, open.

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 bubble's width (it still shrinks to its text): a number is px, a percentage is of the activator, any other CSS length passes through. Replaces the default 40ch cap, also --max-w on the tooltip root.

A maximum, not a fixed width: the bubble still shrinks to short text. Bubbles already wrap at 40ch, so reach for this when one hint wants a different measure; for a library-wide change set --max-w on .bb-tooltip in CSS.

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.

Emitted with the new value whenever v-model changes.

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.