Latest web development tutorials
 

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:

Car

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.jpg" alt="Car" style="width:100%">

</div>
Try It Yourself »

Example (text after the picture)

<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>
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:

Example

<span class="w3-text w3-tag w3-red">9 million</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">9 million</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</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</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</span>
Try It Yourself »