ポップオーバー対ツールチップ
短い答え
ツールチップは短いヒントを出します。ポップオーバーは、もっと多くの文章や選択肢、ボタンを置けます。
数語で十分な場合はツールチップを使います。ページを離れずにもっと読む必要がある場合や操作が必要な場合はポップオーバーを使います。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Popover
↗ ポップオーバー
ポップオーバーは、開いたコントロールにくっついた小さなパネルだよ。ページをブロックせずに、まとまったコンテンツやアクションを置けるよ。
popover attribute / Popoverアバターを選択して、小さいプロフィールを開きます。役割、連絡先情報、フォローアクションが表示されます。
- 以下の場合に使用します
- コンテンツがトリガーの横に属し、人々がページを使い続けることができる場合に使用します。
- 以下の場合は使用しないでください
- 短いラベルだけのヒントには使用してはいけません。その代わりにツールチップを使用してください。
- コードで使用する名前
popover attribute / Popover
Tooltip
↗ ツールチップ
ツールチップは、コントロールについての短いメモです。マウスを乗せたり、キーボードでフォーカスを合わせたりすると開きます。ボタンのように使うことはできません。
role="tooltip"アイコンボタンがキーボードフォーカスを得ると、「リンクをコピー」が表示されます。フォーカスはボタンにとどまります。
- 以下の場合に使用します
- マウスホバーとキーボードフォーカスの両方で短いコントロールラベルを説明するために使用してください。
- 以下の場合は使用しないでください
- ツールチップの中には、アクション、必読の指示、または長い内容を絶対に入れないでください。
- コードで使用する名前
role="tooltip"
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| ポップオーバーPopover | コンテンツがトリガーの横に属し、人々がページを使い続けることができる場合に使用します。 | 短いラベルだけのヒントには使用してはいけません。その代わりにツールチップを使用してください。 | popover attribute / Popover |
| ツールチップTooltip | マウスホバーとキーボードフォーカスの両方で短いコントロールラベルを説明するために使用してください。 | ツールチップの中には、アクション、必読の指示、または長い内容を絶対に入れないでください。 | role="tooltip" |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをポップオーバー (Popover)、ツールチップ (Tooltip)から選んでください。このルールを使用してください: ツールチップは短いヒントを出します。ポップオーバーは、もっと多くの文章や選択肢、ボタンを置けます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。