Feedback

`<kern-tooltip>`

Short hint for a control or an abbreviated value, shown on hover (after delay) and immediately on keyboard focus; Escape hides it. Wrap the trigger (<kern-tooltip text="Neustart"><kern-button …></kern-tooltip>) or point at it with for="id". The trigger gets aria-describedby to a hidden copy of the text. Not for essential information: touch devices never see it.

Examples

Hint for an icon button

Wrap the trigger; the tooltip shows on hover after delay ms and immediately on keyboard focus, and Escape hides it. The trigger gets aria-describedby pointing to the text. Tooltips add hints only — touch devices never see them, so the button still needs its own label.

Abbreviated values and `for`

A tooltip can explain a compact value such as signal bars; make a non-interactive trigger focusable with tabindex="0". With for the tooltip points at a trigger elsewhere in the same document by its id instead of wrapping it; disabled turns it off.

<div style="display:flex;gap:24px;align-items:center;padding-top:32px"> <kern-tooltip text="−58 dBm · good"><kern-signal rssi="-58" hide-value tabindex="0"></kern-signal></kern-tooltip> <kern-button id="tooltip-firmware-trigger">Firmware 1.4.4</kern-button> <kern-tooltip for="tooltip-firmware-trigger" text="Released 2026-10-02 · Stable channel"></kern-tooltip> </div>

Properties

delaydefault 400

number

Hover delay in milliseconds.

disableddefault false

boolean

for

string | undefined

Id of the trigger in the same document, instead of wrapping it.

placementdefault 'top'

"bottom" | "top"

Preferred side; flips when there is no room.

textdefault ''

string

Slots

(default)

The trigger (when for is not used)

CSS parts

tooltip

The bubble