web-dev-qa-db-ja.com

ポップオーバーとツールチップのどちらを使用すればよいですか?

ツールチップとポップオーバーのどちらを使用するかを決定する際の厳格なルールはありますか?ツールチップにはヘッダーがありませんが、その他の考慮事項はありますか?

一貫性を保つために、サイト全体で常にポップオーバーを使用することは理にかなっていますか?または両方を使用できますか?

28
vphilipnyc

ツールチップとポップオーバーのどちらを決定するかについては、いくつかの考慮事項があります。

コンテンツの目的

Tooltipsは、ツールまたはその他の相互作用の動作に関するヒントまたはヒントです。それらは、追加のコンテンツを追加するのではなく、ホバーするコンテンツを明確化または使用することを目的としています。

enter image description here

Popoversは、関連する追加コンテンツを提供するためのものです。 enter image description here

コンテンツのサイズ

tooltipsは、要素の目的を短くするためのものであり、「Xを実行するにはXをクリックする」または「ユーザーの投稿数」という点まで短くする必要があります。 」

一方、ポップオーバーは、はるかに冗長になる可能性があり、ヘッダーと本文に多数のテキスト行を含めることができます。

相互作用

ツールチップは通常、ホバー時にのみ表示されます。そのため、ページの他の部分と対話しながらコンテンツを読み取る必要がある場合は、ツールチップ動作しないでしょう。

ポップオーバーは、ページの他の部分をクリックするか、2番目にポップオーバーターゲットをクリックするか(実装に応じて)であっても、通常は閉じることができます。ポップオーバーを開くと、ページのコンテンツを読みながら、ページ上の他の要素を操作できます。

それに加えて、ポップオーバーはターゲットからマウスアウトしても開いたままなので、その中にボタンや操作を追加できます。

enter image description here

結論

ページ上の要素がツールチップを使用する方法や内容について、Wordに少しヒントを与えたい場合。

追加のコンテンツ、インタラクション、または1行以上のコンテンツを追加する場合は、または、ターゲットがマウスオーバーされていない状態でコンテンツを開いたままにする必要がある場合は、ポップオーバーを使用します。

アクセシビリティの問題、潜在的なSEOの問題、ツールチップ/ポップオーバーの発見の欠如のために注意が必要ですが、絶対に必要でない限りどちらも推奨されません。

37
DasBeasto