あなたが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-大きなクラスを使用します。