Tooltip

kai-tooltip

Wrap a control and it shows a short hint on hover or focus. You give it the trigger and the text; it handles positioning, the open delay, and dismissing on Escape or outside-click.

• Shadow DOM
• Hover + focus
• Self-positioning
• Text-only hint

Preview

When to use

Label a control whose purpose isn’t obvious from its face — an icon-only button, a terse menu item, a status dot. The hint shows on hover and on keyboard focus, so it stays accessible. It carries plain text only; for rich content (a heading, a thumbnail, links) reach for Hover Card instead.

Usage

Put the trigger in the default slot — any focusable control — and set content to the hint text. The tooltip positions itself next to the trigger, portals its bubble inside the shadow root so it isn’t clipped, and dismisses on Escape or an outside click. Tune the hover delay with openDelay (focus always shows it immediately).

<kai-tooltip content="Voice input">
  <kai-button variant="subtle" size="icon" icon="mic" label="Voice input"></kai-button>
</kai-tooltip>

Examples

On an icon button

The common case — an icon-only button whose meaning isn’t obvious without a label.

Code

On a labeled button

Any focusable control works as the trigger, not just icon buttons.

Code

A snappier delay

openDelay sets the hover wait in milliseconds (default 600). Drop it for hints you want to surface faster.

Code

Props

Property	Type	Default	Notes
content	string	''	The hint text shown on hover/focus of the slotted trigger.
openDelay	number	—	Delay (ms) before the tooltip appears on hover. Defaults to 600. Focus shows it immediately regardless.
closeDelay	number	—	Delay (ms) before it hides after the pointer leaves. Defaults to 0 (hides immediately).
placement	string	—	Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional `-start`/`-end`). Defaults to `'top'`; flips to stay in view.
open	boolean	—	Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the element still self-manages on hover/focus). Set `el.open = true`, or `<kai-tooltip open>`; listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Turn the tooltip off while keeping the trigger mounted (hover/focus and `show()` no longer open it).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Tooltip

---

Need a hand? Report a bug Ask for help