W3.CSS Tooltips
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
W3.CSS Tooltips
❮ Previous
Next ❯
Hover over the sentences below:
London
(9 million inhabitants)
is the capital of England.
London
9 million inhabitants
is the capital of England.
W3.CSS Tooltip Classes
W3.CSS provides the following tooltip classes:
| Class | Defines |
|---|---|
| w3-tooltip | The tooltip element |
| w3-text | The tooltip text |
Tooltip Element and Tooltip Text
Tooltips display text (or other content) when you hover over an HTML element.
The w3-tooltip class defines the element to hover over (the tooltip container).
The w3-text class defines the tooltip text.
Hover over the sentence below:
London
(9 million inhabitants) is the capital of England.
Example
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>Try It Yourself »
Tooltip as a Tag
Hover over the sentence below:
London
9 million inhabitants
is the capital of England.
Example
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>Try It Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Image Tooltip
Hover over this picture to see the effect:
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)
Example (text before the picture)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>Try It Yourself »
Example (text after the picture)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>Try It Yourself »
Absolute Positioned Tooltip
If you want the tooltip to appear in an absolute position, position the tooltip text with CSS:
9 million inhabitants
is the capital of England.
Example
<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>Try It Yourself »
Colored Tooltip
If you want a colored tooltip, use the w3-color classes:
Example
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>Try It Yourself »
Rounded Tooltip
If you want a rounded tooltip, use the w3-round classes:
Example
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>Try It Yourself »
Small Tooltip
If you want a small tooltip, use the w3-small class:
Example
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>Try It Yourself »
Tiny Tooltip
If you want a tiny tooltip, use the w3-tiny class:
Example
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>Try It Yourself »
Large Tooltip
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>Try It Yourself »
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>Try It Yourself »
❮ Previous
Next ❯