アクセシブルなツールチップ
ホバーは 300ms 待ってから、フォーカスは即座に出る。role=tooltip を aria-describedby で結び、Esc で閉じる。帯に「保存, ボタン, 説明: …」と読まれる形を表示。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- ツールチップは補足であって操作ではない。中にリンクやボタンを入れない（入れるなら popover にする）
- aria-describedby で結ぶと、要素にフォーカスした時点で説明が続けて読まれる。role=tooltip だけでは結び付かない
- ホバーは 300ms 遅らせて、通り道でちらつかせない。フォーカスは意図が明確なので待たずに出す
- Esc で閉じられること。閉じられないツールチップは、拡大表示で画面の大半を覆ったまま残る
コード（コピーして使えます）
<div class="tp-wrap">
<div class="tp-row">
<button type="button" class="tp-btn" id="tp-save" aria-describedby="tp-tip1">下書きを保存</button>
<span class="tp-tip" role="tooltip" id="tp-tip1">変更は自動で下書きに残ります。公開はされません</span>
</div>
<div class="tp-row">
<span class="tp-field">API キー <code>sk-••••7f2a</code>
<button type="button" class="tp-info" id="tp-i" aria-label="API キーについて" aria-describedby="tp-tip2">?</button>
</span>
<span class="tp-tip" role="tooltip" id="tp-tip2">ダッシュボードの「設定 → 開発者」で再発行できます</span>
</div>
<div class="tp-band"><span class="tp-tag">読み上げ</span><span id="tp-msg">ホバー（300ms 後）か Tab でフォーカスすると表示。Esc で閉じる</span></div>
</div>