ツールチップとホバーカード
短い答え
ツールチップは短いラベルやヒントを出します。ホバーカードは、人やアイテム、リンクについての詳しいプレビューを見せます。
数語で十分な場合はツールチップを使います。プレビューで別ページに移動する手間を省ける場合はホバーカードを使います。キーボードやタッチでも動作する必要があります。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Tooltip
↗ ツールチップ
ツールチップは、コントロールについての短いメモです。マウスを乗せたり、キーボードでフォーカスを合わせたりすると開きます。ボタンのように使うことはできません。
role="tooltip"アイコンボタンがキーボードフォーカスを得ると、「リンクをコピー」が表示されます。フォーカスはボタンにとどまります。
- 以下の場合に使用します
- マウスホバーとキーボードフォーカスの両方で短いコントロールラベルを説明するために使用してください。
- 以下の場合は使用しないでください
- ツールチップの中には、アクション、必読の指示、または長い内容を絶対に入れないでください。
- コードで使用する名前
role="tooltip"
Hover Card
↗ ホバーカード
hover cardは、ちょっとした詳しいプレビューです。参照にマウスを乗せたり選んだりしたときに開き、ページを塞ぎません。
HoverCard著者の名前にカーソルを合わせると、簡単なプロフィールとフォロワー数が表示されます。完全なプロフィールは開いたままにはなりません。
- 以下の場合に使用します
- 人々が次にどこに進むかを選ぶのを助けるオプションのプレビューディテールに使用します。
- 以下の場合は使用しないでください
- ホバーで必要な情報を隠してはいけません。タッチデバイスでは確実に開かない場合があります。
- コードで使用する名前
HoverCard
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| ツールチップTooltip | マウスホバーとキーボードフォーカスの両方で短いコントロールラベルを説明するために使用してください。 | ツールチップの中には、アクション、必読の指示、または長い内容を絶対に入れないでください。 | role="tooltip" |
| ホバーカードHover Card | 人々が次にどこに進むかを選ぶのを助けるオプションのプレビューディテールに使用します。 | ホバーで必要な情報を隠してはいけません。タッチデバイスでは確実に開かない場合があります。 | HoverCard |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをツールチップ (Tooltip)、ホバーカード (Hover Card)から選んでください。このルールを使用してください: ツールチップは短いラベルやヒントを出します。ホバーカードは、人やアイテム、リンクについての詳しいプレビューを見せます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。