W3.CSSツールチップ
以下の文にカーソルを合わせます。
ロンドン はイギリスの首都です。(9 million inhabitants)
ロンドン 9 million inhabitants はイギリスの首都です。
W3.CSSツールチップクラス
W3.CSSは、次のツールチップクラスを提供します。
| クラス | 定義 |
|---|---|
| w3-ツールチップ | ツールチップ要素 |
| w3-テキスト | ツールチップテキスト |
ツールチップ要素とツールチップテキスト
HTML要素にカーソルを合わせると、ツールチップにテキスト（またはその他のコンテンツ）が表示されます。
w3-tooltipクラスは、ホバーする要素（ツールチップコンテナー）を定義します。
w3-textクラスは、ツールチップテキストを定義します。
以下の文にカーソルを合わせます。
ロンドン はイギリスの首都です。(9 million inhabitants)
例
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
タグとしてのツールチップ
以下の文にカーソルを合わせます。
ロンドン 9 million inhabitants はイギリスの首都です。
例
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
画像のツールチップ
この画像にカーソルを合わせると、効果が表示されます。
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)
例（画像の前のテキスト）
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
例（画像の後のテキスト）
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
絶対位置ツールチップ
ツールチップを絶対位置に表示する場合は、CSSを使用してツールチップテキストを配置します。
例
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
色付きのツールチップ
色付きのツールチップが必要な場合は、w3-カラークラスを使用します。
例
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
丸みを帯びたツールチップ
丸みを帯びたツールチップが必要な場合は、w3-丸みを帯びたクラスを使用します。
例
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
小さなツールチップ
小さなツールチップが必要な場合は、w3-smallクラスを使用します。
例
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
小さなツールチップ
小さなツールチップが必要な場合は、w3-tinyクラスを使用します。
例
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
大きなツールチップ
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>