W3.CSS Tooltips
Tooltips display text (or other content) when you hover over an HTML element.
Inline Tooltip Text
Hover over the sentence below!
London 9 million is the capital city of England.
The w3-tooltip class defines the HTML element to hover over (tooltip container).
The w3-text class defines the tooltip text:
Example
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p>
Try It Yourself »
Inline Tooltip Tag
Hover over the sentence below!
London 9 million is the capital city of England.
The w3-tooltip class defines the HTML element to hover over (tooltip container).
The w3-text class defines the tooltip text:
Example
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p>
Try It Yourself »
Large 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)
The w3-tooltip class defines the HTML element to hover over (tooltip container).
The w3-text class defines the tooltip text:
Example (text before the picture)
<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.png"
alt="Car" style="width:100%">
</div>
Try It Yourself »
Example (text after the picture)
<div class="w3-tooltip">
<img src="img_car.png"
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>
Try It Yourself »
Absolute Tooltip
If you want the tooltip to appear in an absolute position, position the tooltip text (w3-text):
Example
<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>
Try It Yourself »
Colored Tooltip
If you want a colored tooltip, use the w3-color classes:
Rounded Tooltip
If you want a rounded tooltip, use the w3-round classes:
Small Tooltip
If you want a small tooltip, use the w3-small class:
Tiny Tooltip
If you want a tiny tooltip, use the w3-tiny class:
Large Tooltip
If you want a large tooltip, use the w3-large classes:
