web-dev-qa-db-ja.com

ツールチップを示すには?

Webページのようなテーブルがあり、1つの列だけに行にカーソルを合わせると、ツールチップが表示されます。列の上部に小さな情報記号(青い円の中にある「i」)がありますが、直感的ではないと思います。ツールチップが可能であることを示す適切な方法は何ですか?

7
strudelkopf

ツールチップは役立ちますが、重要な情報を表示するために使用しないでください。情報が必須ではなく追加である場合、私はあなたのアプローチがかなりまともであると思います。

あなたと同じようにそれをした他の誰かを見てみましょう:

enter image description here

これは、車を選択して構成できるAudi Webサイトから取得されます。上の図に示すように、違いを理解できず、横に小さな「i」アイコンがある場合に備えて、一部のタイプのミラーなどの一部のオプションについては、さらに説明が必要です。ユーザーはiアイコンにカーソルを合わせると、追加情報が表示されます。

enter image description here

4
Bart Gijssens

ツールチップを示すために破線の下線を使用するのが好きです。でも、テーブルのどこが見苦しく見えるかわかりました。

8
Marcie Kaiser

ツールチップを表示する特定の線の色やスタイル(斜体、下線、影付きなど)を変更できます。

ツールチップのあるサイト内のすべてのテキスト/オブジェクトにわたって、そのスタイルに従ってください。

enter image description here

2
Venkatesh K

数日前、slack.comに登録しました。そして、彼らはかなり興味深いソリューションを実装しました。

最初に、ユーザーはアニメーションのために飛び出すアニメーション化された視覚的な合図を目にします-それらをスキップするのは難しいです: enter image description here

そしてキューをクリックした後、ユーザーには情報ボックスが表示されます。 enter image description here

2
Humanoit