このページの目的
アイコンや特定のテキストにマウスを乗せると、フワッと補足説明の吹き出し（ツールチップ）を表示する機能の実装方法を学びます。
UIをシンプルに保ちつつ、補助的な情報を提供したい場合に非常に便利です。今回は、CSSの擬似要素を使った、JavaScript不要の実装方法を紹介します。
smart_display動作サンプル
実際に動作するサンプルです。下のアイコンの上にマウスカーソルを乗せてみてください。
help
このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。
code実装コード解説
1. HTMLの構造
ツールチップを表示させたい要素を<span>などで囲み、data-tooltipというカスタムデータ属性に、表示したいテキストを設定します。
<!-- ツールチップのコンテナ -->
<span class="tooltip-container" data-tooltip="ここに表示したいテキスト">
<!-- ツールチップを表示する対象の要素（アイコンやテキストなど） -->
<span>Hover Me!</span>
</span>2. CSSのスタイル
CSSの擬似要素::before（吹き出しの本体）と::after（吹き出しの三角形）を使って、ツールチップの見た目を作ります。普段は非表示にしておき、ホバーされた時だけ表示されるようにします。
.tooltip-container {
position: relative; /* ★擬似要素の基準点にする */
display: inline-block;
}
/* 吹き出しの本体 */
.tooltip-container::before {
content: attr(data-tooltip); /* ★data-tooltip属性の値を表示 */
position: absolute;
bottom: 100%; /* 要素の上に配置 */
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px; /* 要素との余白 */
background: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap; /* テキストを改行させない */
/* 普段は非表示 */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
/* 吹き出しの三角形 */
.tooltip-container::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px; /* 本体と三角形の間の隙間を埋める */
border: 6px solid transparent;
border-top-color: #333; /* 三角形の色 */
/* 普段は非表示 */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
/* ★ホバーされたら表示 */
.tooltip-container:hover::before,
.tooltip-container:hover::after {
opacity: 1;
visibility: visible;
}