ホバー表示のツールチップを独自データ属性とCSSだけで作る方法

スポンサーリンク

オリジナルのPocketボタンを作る方法を紹介したときに、チラッと触れていたツールチップの作り方をまとめました。

jQueryは一切使わず、シンプルなHTMLとCSSだけで実装する方法です。いろいろと応用が効くので覚えておいても損はないと思いますよ。

CSSと独自データ属性だけの ツールチップ

CSSだけでツールチップを実装する手法というのは、ググればたくさん出てくるんですが、その多くのHTML構造は以下のような感じになっています。

<a href="https://www.google.co.jp/" target="_blank">Google<span>ここにツールチップの内容</span></a>

ツールチップとして表示したいテキストを<span>要素で囲み、通常時はdisplay:none;にして、hover時のみ表示するという方法ですね。

今回僕が紹介する方法では<span>要素は使いません。

「ならツールチップに表示するテキストはどこから引っ張るの?」ってことになるわけですが、そこで利用するのが独自データ属性というやつです。

独自データ属性とは?

独自データ属性というのは、 HTML5で出てくる名前空間に属さない属性のこと。
data-から始まる文字列で指定するのですが、最近のソーシャルプラグインのタグにも含まれていたりするので、見かけたことがあるという人も多いのではないでしょうか?

この独自データ属性は適切な属性や要素がない際に用いられることが想定されているものなのですが、これを使うことで<span>を入れ子構造にする必要がなくなります。

具体的には以下のような感じ。

<a href="https://www.google.co.jp/" target="_blank" data-tooltip="ここにツールチップの内容">Google</a>

このように、<a>要素に対してdata-tooltipという独自データ属性を付与し、その値にツールチップとして表示したいテキストを指定します。

CSSを使って独自データ属性を表示する

さきほど指定した独自データ属性を表示させるためのCSSです。
基本的な考え方としては、独自データ属性を指定した要素にホバーしたら、擬似要素で独自データ属性の値を表示するという流れ。

a:hover {
  position: relative;
}
a:hover:after {
  position: absolute;
  content: attr(data-tooltip);
  top: 0; /* よき位置へ調整 */
  left: 0; /* よき位置へ調整 */
}

とんでもなく簡素にしてますが、基本形としてはこんなもんです。
好みのスタイルを指定してやればいい感じになりますよ。

うまいことやれば、ツールチップを吹き出しスタイルにするなんてことも可能でしょう。

ここではaftercontentプロパティに対して、attrで独自データ要素のdata-tooltipを値にしていますが、例えばこれをtitle属性にしたりしても同じことができますよ。

ただ、title属性が割り当てられていると、ブラウザデフォルトのツールチップが出てくるので、同じテキストが二重に表示されることになってしまい、とっても不格好なのでオススメはしません。

データ属性ツールチップのデモ

で、上のものをベースにして、ちょっとデモを用意してみました。
Webフォントを使って少しボタン風にスタイルを作ってあります。どんなソースになっているかも見られるので、よろしければ参考にしてみてください。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく