Tooltip ツールチップ · kf-tip
短い補足を hover と focus で出す。CSS だけ。
確認待ち
HTML
<div class="kf-row">
<button class="kf-btn kf-tip on" data-tip="hover か focus で出る">ボタン</button>
<button class="kf-btn kf-btn-quiet kf-btn-sm kf-tip" data-tip="複製する" aria-label="複製する">⧉</button>
<span class="kf-status kf-status-warn kf-tip" data-tip="2026-10-24 から">確認待ち</span>
</div>- 要素に
kf-tipとdata-tip="文字"。文字は 1 行、20 字まで。 - 地は
ink-strong、文字はpage。角radius-sm、要素の上に出る。 - アイコンだけのボタンには必ず
aria-labelを付け、同じ文字をdata-tipにも入れる。 - 操作に必要な情報をツールチップに隠さない。ここに無いと困る文は画面に書く。
- スマホでは出ない前提で作る(hover が無い)。