最新のWeb開発のチュートリアル
 

W3.CSSツールチップ


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

<span class="w3-text w3-tag w3-red ">9 million</span>
»それを自分で試してみてください

丸みを帯びたツールチップ

あなたが丸みを帯びたツールチップをしたい場合は、W3-ラウンドクラスを使用します。

<span class="w3-text w3-tag w3-round ">9 million</span>
»それを自分で試してみてください

スモールツールチップ

あなたは小さなツールチップをしたい場合は、W3-小さなクラスを使用します。

<span class="w3-text w3-tag w3-small ">9 million</span>
»それを自分で試してみてください

タイニーツールチップ

あなたは小さなツールチップをしたい場合は、W3-小さなクラスを使用します。

<span class="w3-text w3-tag w3-tiny ">9 million</span>
»それを自分で試してみてください

大きなツールチップ

あなたが大規模なツールチップをしたい場合は、W3-大きなクラスを使用します。

<span class="w3-text w3-tag w3-xlarge ">9 million</span>
»それを自分で試してみてください