ツールチップとは？利用するメリット・デメリット｜デザインする際の注意点5選

システム
エンジニア

ツールチップについて教えてください。

プロジェクト
マネージャー

ツールチップの用途やメリット・デメリットなどを紹介します。

ツールチップとは？

ツールチップとは、Webページのテキストなどの上にマウスポインタを当てると表示される、吹き出しのことです。

よく、メールアドレス入力フォームにマウスポインタを当てると「メールアドレスを入力してください」などと吹き出しが表示されます。あれがツールチップです。

ツールチップはJavaScriptで実装されます。この記事では、JavaScriptでのツールチップの実装方法2種類を解説します。なお、実装を簡易に行うために、JavaScriptのライブラリであるjQueryを利用します。

JavaScriptの解説が目的なので、cssは必要最小限度にとどめています。cssを改造すれば見栄えのいいツールチップが実装できます。デザインの心得のある方は、この記事のソースコードのcssを拡張し、見栄えのいいツールチップを実装してみましょう。

ツールチップの利用用途

ツールチップは、画面表示のなかで直接の説明をやりきれない見慣れない項目について、ユーザが理解するのを手助けするのに使われます。ユーザに必要な情報をすべて表示させた画面にするのでなく、補足情報をツールチップで表現することで画面をスッキリさせることができます。

ツールチップとは、画面に表示する情報を整理して、スッキリさせた上で、必要な時に補助的に表示させるものです。

専門的な用語や文章の補足情報の表示

ツールチップは、テキストやリンク、画像などの補足説明に使用します。メインの画面にすべての情報を記述すると、情報過多になってしまう場面で、キーワードをマウスオーバーした際に、追加の補助的な情報を表示するようにします。

具体的には「専門的な用語」や「文章の補足情報」などの情報をツールチップで表示するようにします。すべての内容が、表示されるような画面を作るのではなく、アクセントをつけながら、情報を補助的に取得できるようにします。

画像などのオブジェクトの補助説明や追加情報

画面に置かれるツールバーの操作ボタンやアイコン、画像などのオブジェクトは、サイトの操作性を示し、見た目を簡潔にすることを目的としています。

画面がスッキリしているというのはメリットですが、ユーザーが操作に関わるオブジェクトの意味を完全には理解していない可能性があります。

この状態を助けるため、ツールチップを利用します。具体的には、ユーザがオブジェクトをマウスオーバーすると、自動的にツールチップを表示するようにします。ツールチップとは、UIのデザインの一要素で、関連するオブジェクトの意味を説明するものとなります。

入力フォームのサポート

入力フォームにはplaceholderという属性があり、簡単な入力ヒントを表示することができます。入力フォーム内に、薄い色の文字で入力内容についてヒントなどを表示することが可能ですが、入力し始めると消えてしまいます。

また、入力フォームのサイズより多くの説明は書けないというデメリットもあります。

これに対して、入力フォームにフォーカスが移動した際に吹き出しのようなツールチップを表示することで說明することができます。例えば、パスワードのルールとして「英数文字を含む」「大文字小文字数字をそれぞれ使う」「8文字以上」のように長めの説明を表示することもできます。

ツールチップとは？利用する際のメリット3選

上述したようにツールチップとは、ユーザの動作（マウスのホバリングなど）に応じて補助的な情報を表示する技術となります。

画面の設計において、ツールチップを有効に使って「サイト画面のデザイン性を向上させる」「ユーザが意思をもって情報を表示させる」「重要度の低い情報は隠してしまう」といったデザインが実現できます。

ここでは、ツールチップのメリットを3点説明します。

1：サイト画面のデザイン性が向上する

ツールチップを使えば、すっきりしたデザインの画面に、説明の追加が可能です。つまり、ツールチップとは「サイト画面のデザイン性が向上させる技術」であり、メリットのひとつです。

2：ユーザーに意志によって情報が表示できる

ツールチップとは、対象にカーソルやマウスポインタを合わせると周辺に小さな領域が出現し「詳しく知りたいユーザに情報を与える」ものです。これは、ユーザが必要に応じて情報を表示させるものです。

つまり「ユーザーに意思をもって情報を表示させる技術」で、ツールチップのメリットと考えられます。

3：重要度の低い情報を隠し必要な情報が見やすい

ツールチップとして表示した画面は、ずっと表示するのではなく「一定時間の経過で消去」もしくは「ボタンを押して消去」として設定できます。

つまり「重要度の低い情報を隠す（これにより必要な情報を見つけやすくする）技術」で、ツールチップのメリットと考えられます。

ツールチップを利用する際のデメリット3選

ツールチップを効果的に使うことのメリットについては上述しました。一方で、ツールチップとは、万能な技術ではなく、以下のようなデメリットもあります。

・SEOの効果がない
・閲覧の邪魔になる場合がある
・スマホやタブレットではマウスオーバーができない

ここでは、ツールチップのデメリットについて3点説明します。

1：ツールチップの内容はSEO効果がない

ここまで、説明したようにツールチップとは、補助的な情報を表示させるためのものです。この定義、つまり「画面の表示おいてメインの情報ではない」ということから考えると当然の話しですが、ツールチップの情報はSEO効果にはつながりません。

このデメリットも考慮してツールチップで表現する内容を考える必要があります。

2：閲覧の邪魔になる場合がある

ツールチップが出す情報ですが、以下のような点から閲覧の邪魔となってしまうことがあります。

・ツールチップの後ろに表示されるはずのものが見えなくなってしまう
・何かをしている途中にツールチップの情報が表示されてしまう
・ツールチップの内容が行動の流れにあっていない

ツールチップとは、あくまでメインとして表示している画面の補助的な情報の表示となります。メインの情報の閲覧の邪魔にならないような表示方法をするように気をつける必要があります。

3：スマホやタブレットではマウスオーバーできないため使いにくい

PCによるサイトのアクセスは、マウスの使用を前提にできますが、スマホやタブレットではそもそも「マウスオーバー」がありません。

このため、ツールチップを表示させるきっかけがない画面を別に考える必要があります。これはツールチップのデメリットと言えます。

ツールチップをデザインする際の注意点5選

ツールチップについて、利用する状況を述べたあとで、メリットとデメリットを説明しました。ここからは、ツールチップを使った画面デザインについて、5点の注意点について説明します。

・表示場所の注意が必要
・ユーザーが気付きやすいようにする
・長い文章はNG
・モバイルでの活用に注意する
・表示時間や非表示設定に注意する

1：表示場所の注意が必要

たとえば、大きすぎるツールチップは、他のオブジェクトを隠してしまい、ユーザー操作の邪魔になってしまうことがあります。また、メインの画面におけるユーザー操作の邪魔にならないような表示場所にも気をつける必要があります。

2：ユーザーが気付きやすいようにする

入力フォームやアイコンなど多くのWeb画面で使われていて、ユーザーが必ずホバーするものはあまり問題がありません。ただし、そうでないものは、ユーザーが気付きやすいようにする必要があります。

ユーザーはこれまでの経験や、なんとなくの雰囲気から「ツールチップがありそうな場所」にカーソルを合わせてくれます。そのような「なんとなく他とも同じ」デザインを考えることも求められます。

3：長い文章はNG

ツールチップは「一定の時間が経つ」もしくは「オブジェクトからカーソルを外すなどの動作」により消えてしまいます。

このため、ツールチップは長い文章はNGと認識し、短い文章の表示に使いましょう。

4：モバイルでの活用に注意する

スマホやタブレットなどのモバイル端末でははホバーができません。そのため、タップや長押しでツールチップを表示させることになります。

モバイルでツールチップを活用するときには、画面のどこをタップすると、情報が表示されるのかがわかるようなデザインを作成する必要もあるでしょう。多くのユーザーが利用する環境に対する配慮が必要となります。

5：表示時間や非表示設定に注意する

ツールチップを一定の時間で消える設定には、ユーザーが表示内容を把握する時間から最適な表示時間にする必要があります。

また、ツールチップはユーザーが簡単に非表示を可能にしましょう。なぜなら、ユーザーがツールチップによって隠されている部分を確認したかったり、ツールチップ自体を邪魔になったりすることがあるからです。

jQueryを使って①動かないツールチップの実装方法3選

まず1種類目は、マウスをテキストに当てると表示される、位置が固定されたツールチップです。初めにソースコードを示し、次にcss、JavaScriptコードの順に解説していきます。

1：ソースコード

 

2：css

まずcssの解説です。

動かないツールチップの場合、親要素をrelative、ツールチップをabsoluteにしないといけません。

bottomとleftは、ツールチップのテキストから見た表示位置の指定です。

z-indexを最高値に指定して、常にツールチップがテキストの前面にくるようにしています。

3：JavaScript

次にJavaScriptの解説です。

このサンプルでは、jQueryをCDNで読み込んでいます。Webページと同じサーバーにjQueryの本体を置かなくても、URLで指定した個所から読み込んでくれます。

$(“#sample”).on
でidがsampleの要素にマウスポインタが当たった場合の挙動を制御できます。

‘mouseenter’
は、「マウスが当てられた時」の挙動を制御します。

$(this)
は、この場合、idがsampleの要素です。thisはこのブロックの中ではidがsampleの要素を指します。

そこに、
append
で子要素を挿入しています。
挿入するのは「ツールチップ」というテキストの、tooltipクラスのcssの要素です。

これでツールチップが表示されます。

‘mouseleave’
でマウスポインタが外れた時の挙動を制御します。

$(this)の子要素からtooltipクラスの要素を見つけ（挿入したツールチップになります）、DOMから取り除きます。

jQueryを使って②動くツールチップの実装方法3選

次は、①を改造し、マウスポインタの位置に合わせて動くツールチップを実装します。こちらもソースコード、css、JavaScriptの順に解説していきます。

1：ソースコード

 

2：css

まず、親要素のrelativeをなくしました。

height属性を追加しました。これを書かないと、ツールチップが縦長に表示されます。

3：JavaScript

マウスが当たったときのツールチップをDOMに挿入する階層が①とは違います。親要素の子ではなく、body要素の直接の子要素として挿入します。

‘mousemove’
は、マウスが動いたときの処理です。

そして、ツールチップを挿入した後と、マウスが動いたときの共通のJavaScriptコードが

$(“.tooltip”).css({top: element.pageY + 20, left: element.pageX + 10});

です。

$(“.tooltip”)
はtooltipクラスの抽出です。ツールチップになります。

.css
でツールチップクラスのcssを上書きします。

上書きするのはtop属性とleft属性です。ツールチップの位置を指定します。

elementはイベントからもらうもので、この場合マウスポインタイベントです。

pageXはマウスポインタのX座標、pageYはマウスポインタのY座標です。それを基に調整した値をleftとtopに指定します。

これで、動くツールチップが実装できます。

システム
エンジニア

jQueryでのツールチップの実装方法がわかりました。

プロジェクト
マネージャー

紹介した方法を参考に、実際にコードを書いて理解を深めましょう。

jQueryでツールチップを簡単に作ろう

このように、jQueryを使えば、JavaScriptでツールチップが簡単に実装できます。平のJavaScriptコードを書くよりも断然早いので、JavaScriptでツールチップを実装するときはjQueryを使いましょう。