HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Hover over the sentences below
W3.CSS provides the following tooltip classes:
Class | Defines |
---|---|
w3-tooltip | The tooltip element |
w3-text | The 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.
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Hover over the sentence below:
London 9 million inhabitants is the capital of England.
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
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)
<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>
If you want the tooltip to appear in an absolute position, position the tooltip text with CSS:
London 9 million inhabitants is the capital of England.
<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>
If you want a colored tooltip, use the w3-color classes:
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
If you want a rounded tooltip, use the w3-round classes:
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
If you want a small tooltip, use the w3-small class:
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
If you want a tiny tooltip, use the w3-tiny class:
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
If you want a large tooltip, use the w3-large classes:
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
If you want to fade in the tooltip, use the w3-animate-opacity class:
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>