Tooltip

kai-tooltip

The hint sits above the page, so an icon-only button can still say what it does.

• Shadow DOM
• Hover + focus
• Self-positioning
• Text or markup hint

Preview

When to use

Label a control whose purpose isn’t obvious from its face, like an icon-only button. It takes plain text or markup through content; for a whole panel, use Hover card.

Usage

Put the trigger in the default slot (any focusable control) and set the hint text. The bubble is portaled inside the shadow root so it is not clipped, and it dismisses on Escape or an outside click. openDelay tunes the hover wait; focus 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

Code

On a labeled button

Code

A snappier delay

openDelay is the hover wait in milliseconds, 600 by default.

Code

Markup in the tip

A child carrying slot="content" replaces the content text, so a tip can hold a key cap, an icon, or a label with a shortcut in it. The bubble is an inverted surface: it re-expresses the muted, border and foreground tokens on itself, so a kit component inside it adapts instead of reading as a light blob on a dark bubble.

SaveSave changes

<kai-tooltip>
  <kai-button variant="outline">Save</kai-button>
  <span slot="content">Save changes <kai-kbd keys="Mod+S"></kai-kbd></span>
</kai-tooltip>

Anything a light-DOM child can hold works here, because the bubble is portaled inside the element’s own shadow root: the slotted content sits next to the kit’s stylesheet and tokens. Set content as well to keep a text fallback for the same tip.

Slots

Slot	Mode	Purpose
(default)	inject	The TRIGGER the tooltip describes. The tip text is the `content` prop, or the `content` slot when it carries markup.
content	replace	The tip body, replacing the `content` text so it can hold markup such as a `<kai-kbd>`.

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
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 the open state: `el.open = true` or the bare `open` attribute. 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).

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

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