hoverで表示されるコンテンツはポインタを乗せても表示を維持できる
UIデザイン実装
概要
この基準では、hoverによって表示されるコンテンツ（Tooltipなど）が、ポインタをコンテンツ上に移動しても表示が継続されることを確認してください。
以下の場合は、Tooltipではなく、Dialogなどを使用することを検討してください。
- 操作の実行に必要度の高い説明
- Tooltip内に表示する文字数が多く、Tooltipの幅が640px以上になるとき
背景
トリガーからポインタを外した後、直ちにTooltipが非表示になると、拡大鏡を使用しているなど可視の領域が狭い場合に、内容を確認できないことがあります。
そのため、Tooltipがhover状態になっている間も表示を継続する必要があります。
メリット
- 拡大鏡を使用しているユーザーが、コンテンツ上にポインタを移動して内容を確認できるようになります。
hoverによって表示されるコンテンツをDialogなどに置き換えることで、見落としを減らし、テキストのコピーを容易にします。
達成方法
hoverを必要としないデザインの検討:- ユーザーが操作を進めるために必要な情報や、長文のテキストでTooltipの幅が640px以上になる場合は、Tooltipを避けDialogなどを使用します。
hoverによって表示されるコンテンツのホバー維持:hoverによって表示されるコンテンツは、ポインタをトリガーからコンテンツ上に移動しても表示が継続されるように実装します。
テスト方法
操作による確認:
- トリガーを
hoverしてコンテンツを表示させた後、ポインタをコンテンツ上に移動します。 - コンテンツが非表示にならず、表示が継続されることを確認します。
- コンテンツの内容が文章の場合は、文章の中央まで
hoverが継続できることを確認します。