JavaScriptを使わずにCSSでツールチップ

ツールチップを表示させるのに、jQueryやBootstrapなどのライブラリを使うまでもないなーってとき、CSS だけで記述する方法があります。
まずはサンプルをご覧ください。

マウスホバーでツールチップを表示

ここにマウスを載せる
↑ の要素にマウスを載せるとツールチップが表示されます。

このサンプルでは JavaScript は使わず、CSS のみで対応しています。

ソースコード解説

HTML

HTMLにはdata-tooltipというカスタム属性を設定します。カスタム属性は、data-プレフィックスで始まっていれば自由に設定して良いというHTML5の仕様です。

<button data-tooltip="ツールチップ表示!">ここにマウスを載せる</button>  

CSS

CSSはちょっと複雑です。

下記はボタンの見た目を定義しています。

button {  
  position: relative;  
  padding: 7px;  
  border-radius: 5px;  
}  

ここからツールチップの定義です。
疑似要素::beforeが吹き出しの矢印部分、::afterが吹き出し本体です。
[data-tooltip]を CSS セレクタに使うことで、data-tooltip属性がある要素全てに効くようになります。

/* hoverしていない場合に非表示、transitionアニメーションを設定 */  
[data-tooltip]::before,  
[data-tooltip]::after {  
  position: absolute;  
  transition: all 0.3s ease 0s;  

  /* opacity: 0なので不可視 */  
  opacity: 0;  
}  

/* 吹き出しの矢印部分 */  
[data-tooltip]::before {  
  content: "";  
  border: 10px solid transparent;  
  border-bottom-color: #ffcccc;  
  top: 16px;  
  left: 10px;  
}  

/* 吹き出しの本体部分 */  
[data-tooltip]::after {  
  content: attr(data-tooltip);  
  display: block;  
  padding: 10px;  
  background: #ffcccc;  
  color: #333333;  
  border-radius: 5px;  
  top: 36px;  
  left: 0;  
  white-space: nowrap;  
}  

/* hoverしたらopacityを上げて可視化 */  
[data-tooltip]:hover::before,  
[data-tooltip]:hover::after {  
  opacity: 1;  
}  

多少CSSは長いですが、data-tooltip属性を書くだけで気軽にツールチップを表示させることができます。
色を変えたかったら表示させたい要素にクラスをつけて出し分けたりするのもいいですね。
勉強になりました。

謝辞

下記サイトを参考に、少し変更したものを掲載しました。ありがとうございます。
HTML の data 属性を使ってツールチップを実装する