web-dev-qa-db-ja.com

段落でツールチップを含むWordをマークする方法は?

1つのWordにツールチップがある文があります。ツールチップのデータは補足的なものであり、メインUIに配置する必要はありません。

ただし、Wordにマークを付けて、ツールチップがあることをユーザーに通知するにはどうすればよいですか? Wordに下線と青い色を付けようとしましたが、リンクのように見えます(そうではありません)。

以下は、現在の画像です。

Text with tooltip

ありがとう!

12
VitalyB

私がよく使うテクニックは、考えられる限り多くの可能性をリストアップして、どれが飛び出すかを確認することです。私にとっては、下の3つ目が他のものよりも優れていると思います。別のアイコンかもしれませんが、少し小さいかもしれませんが、要点はわかります。

Tooltips

8
Glen Lipka

テキスト内のWordにツールチップがあることを示すためのベストプラクティスは、テキストの装飾に点線の下線を使用することです。グレンが作成したリストの最初の例です。

これは通常、略語や頭字語を示すためにタグとともに使用されますが、定義の場合にもうまく機能します。 AListApartでこれについてのよい議論はここにあります

http://www.alistapart.com/articles/hattrick/

3
Brad Hutchison

確かに青にしたくはありませんが、下線を付けて黒(または通常の色)のままにしてみてください。リンクは一般的にnot周囲のテキストと同じ色なので、下線付きの通常の色のテキストの外観は十分に異なる場合がありますが、double下線でさらに区別することもできます。

ページにそのような単語がたくさんある場合は、読みやすさを過度に低下させないために、下線自体の色を淡い灰色にすることを検討してください。

ツールチップがホバー時にすばやく表示されるようにして、簡単に見つけられるようにします。ただし、ページ上でマウスを動かすと、ツールチップがたくさん点滅することはありません。

ただし、元の段落でツールチップを引用したり、ポップアップ(画像内)を表示したりするのは非常に簡単であるため、最初にツールチップの後ろに情報を非表示にする必要があるとは確信していません。上記)適切なフッター行、またはポップアップ全体をレイアウトする他のより良い方法。特に、ポップアップが式自体を覆い隠している場合、段落でツールチップを使用する必要はまったくありませんが、ポップアップを少し再配置する必要がありますが、式へのポインター(吹き出しスタイル)を使用する必要があります。

3
Roger Attrill

緑の実線の下線がツールチップをトリガーすることをユーザーが理解していなかったため、私もこの問題に直面しました。

だから私は異なるバージョンをしました、そして私は最後のものが最良の指標であることを確信しています:

Tooltip indicator - best practice webdesign

結論:

  1. ドットでテキストに下線を引きます(HTMLではabbrのようにドット表示されます)。
  2. 情報アイコンを追加して、背後に情報があることを明確にします(おそらく、疑問符アイコンよりも情報アイコンが優先されます)。
  3. 情報アイコンを下線ではなく、Wordの近くに配置します。
2
Kai Noack

点線の下線を使用するもう1つの引数は、HTML5要素<abbr>が some ブラウザでこのようにレンダリングされることです。

1
user7610

私の意見では、その前または後に小さな疑問符アイコンを使用するのが最善の方法です。これは一般に「ヘルプ」と呼ばれ、CSSでポインターを設定するため、「手」にカーソルを合わせると表示されません。

0
Luuk

ポップアップ全体に反対する必要があります。ユーザーが使用しようとしている主要なコンテンツを不明瞭にしており、ポップアップのツールチップで問題を悪化させています。

チュートリアルのコンテンツを提供する必要があると感じた場合は、ユーザーの作業フィールドの表示を不明瞭にするような方法で提供しないでください。アラートと通知のための単一の場所を提供する方法でUI要素を配置し、ポップアップとツールチップに入力したすべてをその領域にルーティングします。

0
Will Parker