ツールバーのツールチップを「最初だけ待って、あとは即表示」にする（interest-delay-start ＋ :has(:interest-source)）

どんな時に使う？

• エディタのツールバーのように、アイコンボタンが横に並んでいて、それぞれにツールチップがある UI。
• マウスを通り過ぎただけでツールチップが出るのはうるさいので待ち時間を付けたい。でも1つ目が出たあと隣のボタンへ移るたびにまた待たされるのもストレス。OS ネイティブのツールバーと同じ「一度出たら、隣は即表示」の動きを、JS のタイマーなしで作れる。

コード

<div class="bar">
  <button interestfor="tip-bold" aria-labelledby="tip-bold">
    <svg>…</svg>
  </button>
  <span id="tip-bold" popover="hint">太字</span>

  <button interestfor="tip-italic" aria-labelledby="tip-italic">
    <svg>…</svg>
  </button>
  <span id="tip-italic" popover="hint">斜体</span>
</div>

/* 通常は 0.5 秒待ってから表示 */
.bar button {
  interest-delay-start: 0.5s;
}

/* どれかのツールチップが出ている間は、他のボタンも待たずに表示 */
.bar:has(:interest-source) button {
  interest-delay-start: 0s;
}

• interestfor="id" を付けたボタンにホバー（またはキーボードフォーカス）すると、その id の popover="hint" 要素が表示される。
• :interest-source は「いまツールチップを出している側のボタン」に一致する疑似クラス。親の :has() で「バーの中のどれかが表示中」を判定できる。
• 表示までの待ちが interest-delay-start、消えるまでの猶予が interest-delay-end（まとめて interest-delay でも書ける）。
• ツールチップの位置は ガイド: アンカー配置（CSS Anchor Positioning） の方法でボタンに合わせられる。

注意点

• interestfor（Interest Invokers）と popover="hint" は新しい機能で、2026-10 時点では Chromium 系が先行している。未対応ブラウザではツールチップが出ないだけなので、ボタン自体のラベル（aria-labelledby や aria-label）は必ず付けておく。
• 出典の投稿は「html tip」として紹介。コードは投稿の要旨を再構成したもの。

出典

• @sanyampunia の投稿