戻る

「ツールチップ」とは、カーソルやマウスポインタを合わせた時に周囲に小さな領域が出現し、注釈などが表示されるものです。
ヒントを表示したりするのにも使われます。

具体的には以下の様なものです。

マウスカーソルを青い文字に重ねてみましょう。黄色い吹き出しが出るはずです。

ツールチップはどういう機能かわからない閲覧者向けにヘルプメッセージを出したり、絶対読まないといけないわけではなく興味があれば読んでもらえれば良いような、ちょっとしたコメントなどを表示させたりしたい時に便利です。

従来はプログラムなどを使わないとこのようなツールチップを実現できませんでしたが、最新の環境では、なんと CSS だけで実現できます。

HTML では、ツールチップを表示させたい部分を <span>～</span> で囲います。

そして <span> には data-descr という属性を追加し、値としてツールチップ内に表示させたいメッセージ（ここでは「あれやらこれやら、なんとかかんとか」）を記入します。

これで HTML の編集はおしまいです。

CSS を上記のように記入すれば、もうツールチップは完成です！
CSS を読み込んだ瞬間から、上記の HTML を仕込んだ場所にツールチップが出現するようになります。

とても簡単に実装できました。

HTML側の data-descr の内容を変えるだけで好きなだけ使い回せるので、ツールチップはいくつでも設置できます。もちろん CSS は一度設定すれば良いので、何度も同じことを書く必要はありません。

いったい何をやっているのか？ 気になった方は以下の解説を参考にしてください。

この例では「データ属性」と呼ばれる属性を使用しています。
<span data-descr="～"> の data-descr の部分がデータ属性です。

データ属性 - MDN

HTML5 では、特定の要素に従来の属性とは異なるデータを格納できるよう、拡張性を念頭に置いて設計がされています。data-* 属性により、標準規格外のデータやプロパティなどを HTML 要素に追加で格納できるようになっているのです。

その構文は単純で、あらゆる要素で、名前が data- で始まる属性を付けるとそれがデータ属性となります。
今回の例では、Description（説明）という英単語をもじって data-descr としています。

例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 data 属性を使用すると以下のようになります。

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

上の例では data-columns data-index-number data-parent の３つのデータ要素が追加されている様子が分かります。

要するに、好きな HTML タグに data- 要素を追加すれば、好きなだけ関連データを格納しておけるというわけです。

そしてさらに CSS からこれらデータ要素に格納した値にアクセスできます。これにより CSS の機能でデータ要素に書き込んだ文字をツールチップ内に表示させられます。 詳しくは次項を確認してください。

今回使用した CSS を順に解説します。
まずは前半部分から。

この部分は、ツールチップを表示させる対象文字列のデザインを行っています。
作例では青くて下線が引かれているように見える部分です。

セレクタが span[data-descr] という表記になっていますが、これは「data-descr 属性を持つ span 要素」を意味します。 つまり <span> の中でも data-descr 属性をもっている物、すなわち <span data-descr="～">～</span> の部分に絞ってデザインできるというわけです。今回にぴったりなセレクタですね。

属性セレクター - MDN

あとは、文字の色を変えたり、下線を引いたりしています。この部分のデザインについてはお好みなので、なにか別のデザインにアレンジしてみても良いでしょう。

cursor: help; は、マウスカーソルの形を特別な形状に変更しています。マウスカーソルを青い文字に重ねた時に、ヘルプっぽいイメージのカーソルが出現することでしょう。こうすれば通常のリンクと差別化できるので分かりやすいと思ったため、このカーソルを変える設定を導入しています。

cursor - MDN

次は後半部分です。

これは、実際に表示されるツールチップの黄色い吹き出し部分のデザインを行っています。

セレクタは span[data-descr]:hover::after という表記になっていますが、これは「data-descr 属性を持つ span 要素にマウスを重ねた（hover）ときに、要素の後ろ（after）に追加の要素を生成する」ことを意味します。 つまり <span data-descr="～">～</span> の範囲にマウスカーソルが重なった時、ツールチップを表示させるのにぴったりなセレクタと言えます。

:hover は、要素にマウスカーソルが重なった際に設定が有効になることを意味します。こういったセレクタに付加して状況を限定したりできるオプションのことを「擬似クラス」と呼びます。
ちなみに以前の CSS 練習問題で「リンクにマウスカーソルが重なった時に色を変える」設定を行う際に a:hover というセレクタを使用したことがあります。マウスで触れると色が変わるこんな感じのリンクを作れましたね。

:hover - MDN

::afterを設定すると、指定した要素の後ろに、指定の CSS 設定で新たな要素を作り出す事ができます。こういった CSS で作り出される新たな要素のことを「疑似要素」と呼びます。
今回はツールチップ本体である黄色いボックス部分全体が疑似要素となっています。CSS によってツールチップが擬似的に生成されたわけです。

::after - MDN

content: で、after が生成した追加要素（ツールチップ部分）の中に書かれる文字を設定できます。content: attr(data-descr); と書くことにより「data-descr 要素に格納された値」をツールチップの中に表示できます。HTML 側に書き込んだ値をそのまま採用するので、ツールチップを作るたびに CSS を編集し直す必要はありません。

つまり、HTML側では <span data-descr="好きなメッセージ">ここをクリック</span> のように書くだけで、「好きなメッセージ」の部分が自動的にツールチップの中に掲載されて出現するのです。汎用性が高くて使いやすそうですね！

position left top プロパティでツールチップを出現させる位置を文字の下方になるよう調整しています。

あとは color background-color border といったおなじみのプロパティで、ツールチップ部分のデザインを行っています。ここではよくある黄色っぽいデザインにしてみましたが、お好みで異なるデザインにしても良いでしょう。

以上です。CSSの機能をフル活用すれば、こんな事もできてしまうのです。すごくないですか？ みなさんももし良ければぜひ活用してみてください。たとえばこんなふうに！

戻る