CSSでマウスオーバー時にツールチップを表示する方法

ショーケース

上の ‘mouse hover’ にマウスを載せるとツールチップが表示される。

コード

HTML

<div class="container" tooltip="This is tooltip">mouse hover</div>

• class="container": ツールチップを表示する要素を包むコンテナとしての役割を持つ。
• tooltip: ツールチップとして出力する内容を指定する。

CSS

以下は簡単にテストできるように HTML コードのまま書かれた CSS だ。実際には別の CSS ファイルに記述するのが望ましい。

<style>
.container {
    position: relative;
}

.container:hover::after {
    content: attr(tooltip);

    background-color: rgba(0, 0, 0, 0.5);
    color: white;
  }
</style>

• .container:hover::after: container クラスを持つ要素にマウスを載せたときに ::after 擬似要素に対するスタイルを定義する。擬似要素と呼ばれる理由は、これらが実際のコンテンツ領域を持たないためだ。
• content: attr(tooltip): tooltip 属性の値をツールチップとして表示する。