ツールチップのz-indexベストプラクティス

ツールチップのz-index戦略

ツールチップはページ上のほぼすべての上に表示される必要があります。簡潔でコンテキスト依存のため、他のUIレイヤーによってクリップされたり隠されたりしてはいけません。z-indexスケールで最も高い値が必要です。

z-index階層での位置

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1080;
  --z-tooltip: 1090; /* 最高レイヤー */
}

ポータルベースのツールチップ

ツールチップがすべてのコンテンツの上に確実に表示されるようにするには、document.bodyの子としてレンダリングします。

ツールチップライブラリとz-index

ライブラリ	デフォルトz-index	設定可能？
Tippy.js	9999	はい、zIndex propで
Floating UI	auto	はい、styleで
Radix Tooltip	(portal)	はい、CSSで
MUI Tooltip	1500	テーマで

重要な考慮事項

1. 常にポータルを使用：スタッキングコンテキストの罠を避けるためbodyレベルでツールチップをレンダリング
2. pointer-events: noneを使用：ツールチップは下の要素とのインタラクションをブロックしない
3. タッチデバイスを考慮：ホバートリガーのツールチップにはタップで表示する代替手段が必要
4. アクセシビリティ：スクリーンリーダー向けにrole="tooltip"とaria-describedbyを使用