あなたがHTML要素にカーソルを合わせるとツールチップがテキスト（または他のコンテンツ）を表示します。
インラインツールチップテキスト
以下の文章の上にマウスを移動！
ロンドン900万はイギリスの首都です。
W3-ツールチップのクラスは、（ツールチップコンテナ）上にマウスを移動するHTML要素を定義します。
W3-テキストクラスは、ツールヒントテキストを定義します。
例
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> »それを自分で試してみてください インラインツールチップタグ
以下の文章の上にマウスを移動！
ロンドン900万はイギリスの首都です。
W3-ツールチップのクラスは、（ツールチップコンテナ）上にマウスを移動するHTML要素を定義します。
W3-テキストクラスは、ツールヒントテキストを定義します。
例
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> »それを自分で試してみてください 大きなツールチップ
効果を確認するために、この絵の上にマウスを移動：
車は輸送に使用される車輪付き、セルフパワーの自動車です。 用語のほとんどの定義は車は一般的に4輪を持っていることを指定します。（ウィキペディア）
W3-ツールチップのクラスは、（ツールチップコンテナ）上にマウスを移動するHTML要素を定義します。
W3-テキストクラスは、ツールヒントテキストを定義します。
例（絵の前のテキスト）
<div class="w3-tooltip">
<p
class="w3-text">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)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> »それを自分で試してみてください 例（画像後のテキスト）
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">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)</p>
</div> »それを自分で試してみてください 絶対ツールチップ
あなたはツールチップが絶対位置に表示したい場合は、ツールヒントのテキスト（W3-テキスト）を配置します：
例
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> »それを自分で試してみてください 着色ツールチップ
あなたが着色されたツールチップをしたい場合は、W3-色のクラスを使用します。
丸みを帯びたツールチップ
あなたが丸みを帯びたツールチップをしたい場合は、W3-ラウンドクラスを使用します。
スモールツールチップ
あなたは小さなツールチップをしたい場合は、W3-小さなクラスを使用します。
タイニーツールチップ
あなたは小さなツールチップをしたい場合は、W3-小さなクラスを使用します。
大きなツールチップ
あなたが大規模なツールチップをしたい場合は、W3-大きなクラスを使用します。