W3.CSS Tooltips
W3.CSS Tooltip Classes
Tooltips display extra information when the user hovers over an element.
W3.CSS provides the following tooltip classes:
| Class | Defines |
|---|---|
w3-tooltip |
The tooltip container |
w3-text |
The tooltip content |
Hover over the examples below:
London (9 million inhabitants) is the capital of England.
London 9 million inhabitants is the capital of England.
Tooltip Container and Text
The w3-tooltip class defines the element the user hovers over.
The w3-text class defines the content that appears on hover.
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
Add w3-tag to style the tooltip content as a tag:
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 »
Image Tooltip
A tooltip can also contain text related to an image:
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)
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)
Examples
<div class="w3-tooltip">
<img src="img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div>
Try It Yourself »
<div class="w3-tooltip">
<p class="w3-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div>
Try It Yourself »
Positioned Tooltip
Use CSS positioning when you want the tooltip content to appear in a specific position:
Example
<p class="w3-tooltip">London
<span class="w3-text w3-tag"
style="position:absolute;left:0;bottom:18px">
9 million inhabitants
</span>
is the capital of England.
</p>
Try It Yourself »
Colored Tooltip
Add a W3.CSS color class such as w3-red:
Rounded Tooltip
Add a round class such as w3-round-xlarge:
Tooltip Sizes
Use W3.CSS size classes to change the size of a tooltip.
Small Tooltip
Tiny Tooltip
Large Tooltip
Animated Tooltip
Add w3-animate-opacity to fade in the tooltip content:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>
Try It Yourself »
