擬似要素 :after を使ってツールチップを実装しよう

phi phi on css, css3

以前『表現の幅が広がる!!? CSS3 で追加された ::before, ::after 擬似要素の使い方 | phiary』で
詳しく紹介した擬似要素.

これを使って簡単なツールチップを実装する方法を紹介したいと思います.

あっタイトルには :after と書きましたが :before でも特に問題ないです.

Runstant

動作デモです. ボタンやラベルにフォーカスするとツールチップが表示されるのが分かるかと思います.

Flow

実装のながれをステップ形式で解説していきます.

1. 要素に data-tooltip 属性を設定

ツールチップを表示したい要素に data-tooltip を指定します.

<button data-tooltip='これはボタンです!'>Button</button>  

runstant

2. 属性指定の CSS セレクタを作成

[属性名] でその属性が指定された要素に対してのみ スタイリングすることができます.

通常時, 擬似要素, ホバー時の擬似要素をそれぞれ指定しています.

[data-tooltip] {
}

[data-tooltip]:after {
}

[data-tooltip]:hover:after {
}

runstant

3. ツールチップを実装

とりあえず, 表示しっぱなしのものを実装します.

[data-tooltip] {
  position: relative;
}

[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  display: block;
  left: 0px;
  padding: 4px;
  background-color: #444;
  color: #eee;
  white-space: nowrap;
  z-index: 9999;

  bottom: -3em;
}

[data-tooltip]:hover:after {
}

やっていることは

  • data-tooltip 属性の中身を content に指定. content: attr(data-tooltip)
  • 親を基準にするために要素に position: relative, :afterposition: absolute をそれぞれ指定
  • 開業させないために white-space: nowrap を指定
  • 最前面に表示させるために z-index:9999

って感じです.

一応 bottom だけ離して指定してあるのには意味があります. 次のステップにて.

runstant

4. マウスが乗ったら表示するようにしよう

下記のように指定します.

[data-tooltip]:after {
  ...

  opacity: 0;
  bottom: -3em;
}

[data-tooltip]:hover:after {
  opacity: 1.0;
}

:hover:after に指定することでホバー時の擬似要素をスタイリングすることができます.

通常時は opacity:0 を指定しておきホバー状態になったら opacity:1 を指定します.

これでほぼほぼ完成です.

runstant

5. アニメーションをつけてみよう

ついでにアニメーションも付けてみましょう♪

[data-tooltip]:after {
  ...

  transition: 500ms;
  opacity: 0;
  bottom: -2em;
}

[data-tooltip]:hover:after {
  transition-delay: 500ms;
  opacity: 1.0;
  bottom: -3em;
}

このように bottom はアニメーションで後で書き換える予定だったので 下の方で指定しておりました.

やっているのは

  • アニメーションさせるために transition: 500ms; を指定
  • ちょっと遅れて表示させるために transition-delay: 500ms を指定
  • フワッと下から表示させるために bottom を -2em に書き換えて, ホバー時の bottom を -3em に修正

ってな感じです.

runstant

参考になれば幸いです.