# Tooltip

A hint that appears on hover or focus of the control you wrap — text-only, positioned for you, dismissed on Escape.

<p class="kai-tag-sub">kai-tooltip</p>

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.

## Preview

> **tip:** 
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](/components/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).

```html
<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.

### On a labeled button

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

### A snappier delay

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

## Props

## Composed from