BundyUI

Overlays

Kbd

Tooltip

A hover/focus-triggered label shown next to its trigger element.

html
<UiTooltip />

Text

text sets what the tooltip says. Keep it to the thing the trigger doesn't already say.

Kbds

kbds is a keyboard shortcut beside the text — the usual reason a toolbar icon has a tooltip at all.

Disabled

disabled stops the tooltip opening, without you having to unwrap the trigger.

disabled still renders the trigger normally; it just suppresses the tooltip popup.

Arrow

arrow is the pointer connecting the panel to its trigger, on by default. Drop it where the tooltip sits tight against the trigger and the arrow adds nothing but a notch.

Delay duration

delayDuration sets how long a hover has to settle before the tooltip appears. Shorten it for a dense toolbar, lengthen it where tooltips would otherwise flicker in passing.

Content

content sets where the tooltip sits relative to its trigger — side, alignment and offset.

Multi-root component (trigger + teleported content), same fallthrough caveat as DropdownMenu — passed class only reaches the trigger.

Open

Bind it with v-model:open to show a tooltip without a hover — walking someone through a UI, say.

Default open

defaultOpen starts the tooltip showing when it manages its own state — for a one-off hint on first visit, not as a standing default.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
text
string
—
The text content shown inside the tooltip when no `content` slot is provided.
kbds
string[]
—
Keyboard shortcut keys displayed alongside the tooltip text.
disabled
boolean
false
Prevents the tooltip from opening.
arrow
boolean
true
Shows a small arrow pointing from the tooltip toward the trigger.
delayDuration
number
200
Delay in milliseconds before the tooltip opens on hover or focus.
content
TooltipContentProps
{ side: 'top', align: 'center', sideOffset: 8 }
Positioning options for the tooltip content, such as side, alignment, and offset.
open
boolean
—
Controls whether the tooltip is open. Omit this to let the tooltip manage its own state internally (starting from `defaultOpen`); pass it to fully control visibility yourself.
defaultOpen
boolean
false
Whether the tooltip is open first when uncontrolled.

Slots

Slot
default
content

Emits

Event
Payload
Description
update:open
[value: boolean]
—

Types

ts
interface TooltipContentProps {
    side?: "top" | "right" | "bottom" | "left";
    align?: "start" | "center" | "end";
    sideOffset?: number;
}