レスポンシブなツールチップを作ってみる(1)~簡単な長方形~

オーソドックスなツールチップ(CSSのみ・背景画像使用)

今回は最終的にレスポンシブなツールチップを作っていきたいと思います。ツールチップはバルーンとも言いますね。ではまずはオーソドックスにマウスオーバー時に現れるツールチップツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
をCSSのみで作ります。この段落の破線になっているリンクをマウスオーバーしてください。ツールチップが現れると思います。

このツールチップは背景画像を使用しています。よくサンプルにあるCSSだけで作った吹き出し付のツールチップなどではないです。

HTML

ポイントは特にありませんが、tooltipクラスの下層にあるspanタグの中身は、画面表示時は非表示になります。マウスオーバー時に表示されるようになります。

CSS

大事な部分は「.tooltip span」プロパティの「display: none;」です。最初はツールチップの内容部分は非表示にします。次に「.tooltip:hover span」プロパティの「display: inline; position: absolute;」です。マウスオーバー時にツールチップを表示、「position: absolute;」で表示したツールチップを、その上位タグであるツールチップの対象部分を基準位置とした絶対位置に配置しています。これにより、ツールチップの対象となるテキストが画面のどこにあっても、その位置を基準にツールチップが現れてくれます。背景画像を使わない場合は、background-imageなどを外して適当にCSSを変更します。

ただこのやり方だと、ツールチップが絶対位置で表示されるので、ツールチップ対象のテキストが画面の両端にある場合、ウィンドウ幅によってはツールチップがウィンドウからはみ出るようになります。スマホサイトではもっと頻繁にそういった事態になるでしょう。レスポンシブなツールチップを実現するには、CSSのみで実現するというのは些か厳しいです。

オーソドックスなレスポンシブツールチップ(吹き出しなど疑似要素なしの場合)

というわけでjQueryを使用します。よくあるCSSの:after疑似要素などを使って吹き出しツールチップを作っていますが、いったんそれは考えず、長方形のツールチップを想定して作ります。

それではサンプルです。このサンプルで使用するツールチップのデザインは先ほど使用した背景画像を使った長方形のシンプルなツールチップです。この段落の破線になっているリンクをマウスオーバーしてください。ツールチップが現れると思います。

ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97


HTML

HTMLのポイントは、今回のやり方ではツールチップを表示させるテキストリンクとツールチップの本体部分のタグが親子でなくていいという点です。ツールチップの本体だけを別の場所に固めてもいいです。

テキストリンクにはdata-*属性を使い、対応するツールチップ本体のid属性を紐づけておきます。

ツールチップ本体はid属性とツールチップ本体共通のCSSクラス(tooltip-componentクラス)がポイントです。basic-tooltipクラスはツールチップのデザイン用です。基本的にjQuery部分に影響はしませんが、例えば:after疑似要素などで作ったツールチップの吹き出しの突起の位置を、吹き出しの大きさや位置で動的に変えたいといった場合、ツールチップの制御は結構大変になります(jQueryでは非DOM要素である疑似要素を直接変更できないので)。なので今回は長方形のツールチップにしています。吹き出しの突起の位置を変える必要がなければ今回のサンプルを少しいじるだけでうまくいくと思います。

CSS

イベントによる制御をjQueryでやるのでCSSはだいぶすっきりします。ポイントは「z-index: 100;」でツールチップを他の要素より前面に表示させることぐらいでしょうか。「tooltip-show」クラスを使ってツールチップの表示/非表示を切り替えます。

jQuery

ツールチップが画面からはみ出さないように頑張ってます。画面からはみ出た幅と高さの計算は以下の図のように考えました。

tooltip1
tooltip2

課題

テキストリンクが複数行にまたがった場合の改行された部分をマウスオーバーあるいはスマホのタッチしたときの動作。ツールチップの表示にアニメーションを入れたい。吹き出し版も作りたい。このぐらいでしょうか。

広告
  • LINEで送る