THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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.

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 »

Image 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...</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 Tooltip

If you want the tooltip to appear in an absolute position, position the tooltip text (w3-text) with CSS:

London 9 million is the capital city of England.

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">9 million</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 »

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</span>
Try It Yourself »