Components / Overlays & Dialogs / Tooltip

Tooltip beta

A label that appears on hover and focus, in ink black. Pure CSS — no positioning library, no JS.

Preview

Uses: Button — include its CSS alongside this one.

<div style="display:flex;gap:10px;padding-top:30px;flex-wrap:wrap">
  <button class="btn btn-sec btn-md k-tip" data-tip="Copy link" type="button">Copy</button>
  <button class="btn btn-sec btn-md k-tip" data-tip="Open settings" type="button">Settings</button>
  <button class="btn btn-pri btn-md k-tip" data-tip="Nothing to save yet" data-side="bottom" type="button">Save</button>
</div>

/* KATA Tooltip — CSS only, driven by [data-tip]. */
.k-tip{position:relative}
.k-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(2px);background:var(--k-ink);color:var(--k-on-color);font-family:var(--k-font);font-size:11.5px;font-weight:500;line-height:1;padding:5px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:30}
.k-tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--k-ink);opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.k-tip:hover::after,.k-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.k-tip:hover::before,.k-tip:focus-visible::before{opacity:1}
.k-tip[data-side="bottom"]::after{bottom:auto;top:calc(100% + 7px)}
.k-tip[data-side="bottom"]::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--k-ink)}

Usage

For naming icon buttons and shortening explanations. Never for essential information — if it matters, write it on the page. Keep it under five words.

Accessibility

The trigger must be focusable so the tooltip appears on keyboard focus too. The tooltip text duplicates the accessible name; it never replaces it.

Popover

Alert