日曜、午後、6時半。のロゴ

特定の項目に力ーソルをのせた時に吹き出しのようなツールチップを表示させる方法【jQuery】

特定の項目に力ーソルをのせた時に吹き出しのようなツールチップを表示させる方法について

先日、「EFO(エントリーフォーム最適化)※」の一環として、ツールチップを使う機会がありました。

MEMO
EFOとは、申し込みフォームなど、最終的な利益に繫がるページの中で、離脱に繋がっている箇所を洗い出し、別のページへ行かない様、改善する施策のこと。

EFOで重要なポイントの一つが、”見た目をスッキリさせること”。

当たり前ですが「あーこれ時間かかるやつや…」とユーザーに思わせた時点でOUTです。それが離脱に繋がります。

ぼく
入力項目の中に注釈(文字)が長々と書かれてたら、”げんなり”するでしょ? 

なので、大多数のユーザーにとって必要ない文章に関しては、極力”表示させない”方が良いです。

そんな時に便利なのが、ツールチップ。

↓ ツールチップとは…

カーソルを?のアイコンに合わせたとき、 吹き出しが出現し、その吹き出し内には、 選択された項目に関する補足情報が表示される

カーソルを?のアイコンから外すと、 吹き出しが消える

こうすることで、必要な情報のみが表示され、ユーザーが入力に集中できる様になります。(長々とした注釈(文字)が減るので、心理的な圧迫感が軽減されるのもポイント。)

作成方法は以下の通り。

 

ツールチップの作成方法。

HTML

CSS

↓ブラウザで見ると、こんな感じの見た目になります。

HTMLとCSSを適用して表示される内容

 

続いて、 jQueryの.prependメソッドを利用し、アイコンの上にカーソルを乗せると、吹き出しが表示され、逆にアイコンからカーソルを外すと吹き出しが消える様に設定します。

jQuery

 

あとは、CSSで吹き出しの見た目を整えてあげれば、完成です。

↓こんな感じで反映される様になります。

反映される内容

細かいことですが、ユーザーの心理的負担を減らし、離脱を低減できる可能性があるので、もしフォーム内で長々と注釈を記載しているのであれば、やった方がいいですね。

ただ、何でもかんでもツールチップ内に格納するのではなく、あくまでも”大多数のユーザーには必要ないであろう情報”のみを格納してください。

でないと逆に「えっ、ここに何を入力すればいいん??」と迷わす & 一手間かけさせることになるので。(そして離脱に繫がる…)

そんな感じです。終わりッ!!

 

コメントを残す