ツールチップ・ポップオーバーUIデザインパターン：表示タイミング・配置・アクセシビリティ

ツールチップとポップオーバーは、UIに補足情報を提供するためのオーバーレイコンポーネントです。アイコンボタンの説明・専門用語の解説・入力ガイダンスなど、メインUIを邪魔せずに情報を提供できます。本記事では、ツールチップとポップオーバーの設計パターンとアクセシビリティ対応を解説します。

ツールチップ vs ポップオーバーの違い

ツールチップ（Tooltip）：

• 短いテキストのみ（インタラクティブな要素なし）
• ホバー時またはフォーカス時に表示・離れると消える
• ユーザーが操作できない（ただの情報表示）
• 最大幅：200〜300px程度
• 使用例：アイコンボタンのラベル説明・省略されたテキストの全文表示

ポップオーバー（Popover）：

• テキスト以外にリンク・ボタン・フォームなどインタラクティブな要素を含む
• クリック・タップで表示・別の場所をクリックするかCloseで消える
• ユーザーが操作できる（リンクをクリック・フォームを入力など）
• より大きなコンテンツを表示可能
• 使用例：ユーザーアバタークリックでのプロフィールカード・日付ピッカー・カラーピッカー

ツールチップの設計

表示内容：

ツールチップには「ラベルや補足説明」のみを表示します。長い文章・リンク・フォームはポップオーバーを使います。

トリガーとタイミング：

デスクトップでは hover（ホバー後200〜300msのディレイが誤表示を防ぐ）と focus（キーボードナビゲーション対応）の両方でトリガーします。モバイルではホバーが存在しないため、長押しまたは専用の「?」ボタンでツールチップを表示するか、ツールチップの代わりにポップオーバーを使います。

デザイン：

• 背景: ダークグレー（#1F2937）または黒
• テキスト: 白
• 角丸: 4〜6px
• パディング: 6〜8px 上下 / 10〜12px 左右
• フォントサイズ: 12〜13px
• 矢印（ティップ）: 三角形で参照元を指す

表示位置のロジック：

デフォルト位置（top・bottom・left・right）を設定し、画面端に近い場合は自動で反対方向に反転する実装が必要です。FloatingUIやPopperなどのライブラリを活用するとこの位置計算を自動化できます。

ポップオーバーの設計

トリガーとクローズ：

クリック・タップでトリガーし、「×ボタン」・ポップオーバー外のクリック・ESCキーで閉じる実装が基本です。

サイズと最大幅：

ポップオーバーはコンテンツに応じて幅が変わりますが、最大幅を320〜400px程度に制限し、コンテンツが多い場合はスクロールを許可します。

バックドロップ（オーバーレイ）：

モーダルと異なり、ポップオーバーは通常バックドロップ（背景の暗転）を使いません。ただし重要な操作（削除確認等）で使う場合はバックドロップで背景をロックします。

z-indexの管理：

ポップオーバーは他のコンテンツより前面に表示される必要があります。デザインシステムでz-indexの命名規則（z-dropdown・z-popover・z-modal・z-toast 等）を定義し管理します。

アクセシビリティ対応

ツールチップのアクセシビリティ：

• トリガー要素に aria-describedby でツールチップ要素のIDを参照
• ツールチップ要素に role="tooltip"
• キーボードフォーカス時に必ずツールチップを表示する

ポップオーバーのアクセシビリティ：

• トリガー要素に aria-expanded と aria-controls を設定
• ポップオーバー内にインタラクティブ要素がある場合、開いた際に最初の要素にフォーカスを移動
• ESCキーで閉じてトリガー要素にフォーカスを戻す
• スクリーンリーダーの読み上げ順序（taborder）が論理的かチェック

モバイルでのタップ対応：

モバイルユーザーのためにツールチップをポップオーバー化するか、タップして表示・再タップまたは別の場所タップで閉じる動作を実装します。

まとめ

ツールチップとポップオーバーは情報設計の重要なツールです。「表示内容の複雑さ」「ユーザーの操作が必要かどうか」でツールチップとポップオーバーを使い分け、キーボードアクセシビリティとモバイル対応を忘れずに実装することで、すべてのユーザーにとって使いやすい情報補完UIが完成します。