A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
ツールチップとは、HTML 要素の上にカーソルを乗せた時に、テキスト（または他のコンテンツ）を表示するものです。
下の文章の上にマウスを乗せてください！
London 9 million is the capital city of England.
w3-tooltip クラスは、マウスを上にホバーする HTML 要素を定義します（ツールチップコンテナ）。
w3-text クラスは、ツールチップ・テキストを定義します：
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p>
Try It Yourself ❯
下の文章の上にマウスを乗せてください！
London 9 million is the capital city of England.
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p>
Try It Yourself ❯
効果を確認するために、この写真の上にマウスを乗せてください：
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
w3-tooltip クラスは、マウスを上にホバーする HTML 要素を定義します（ツールチップコンテナ）。
w3-text クラスは、ツールチップ・テキストを定義します：
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Try It Yourself ❯
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Try It Yourself ❯
ツールチップを絶対位置に表示したい場合は、ツールチップのテキスト (w3-text) を CSS で配置します：
If you want the tooltip to appear in an absolute position, position the tooltip text (w3-text) with CSS:
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million</span></p>
Try It Yourself ❯
ツールチップに色を付けたい場合は、w3-color クラスを使用します：
ツールチップの角を丸めたい場合は、w3-round クラスを使用します：
小さなツールチップにしたい場合は、w3-small クラスを使用します：
極小さなツールチップにしたい場合は、w3-tiny クラスを使用します：
大きなツールチップにしたい場合は、w3-large クラスを使用します：
ツールチップをフェードインしたい場合は、w3-animate-opacity クラスを使用します：