W3CSS Tooltip

Tool tips are small notes that describe something. Often times when you click on a button or an image a small floating text appears which contains information about the functionality of the button or what this image is. It is extremely easy to create W3CSS tooltip.
You have to use two classes w3-tooltip and w3-text. Use the class w3-tooltip in the opening tag of the element, with which you want to associate a tooltip. Next, mention the tooltip text in the span and add w3-tooltip class to this span. Take a look at the following code to understand this concept:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<p class="w3-tooltip">Italy is one of the best
<span class="w3-text">(<em>4 Football Worldcup Winner</em>)</span>
football side in Europe</p>



</body>
    
</html>

Download the code Try the code

Open the above webpage in the browser, you should see the text inside the paragraph. However, the text inside the span tag will not be visible at this time. Now hover mouse over the text, you shall see tooltip text appear. This is the basic version of tooltip.

Tooltip as Tag

You can create fancy tool tips if you want such as tooltips like tags etc. To create a tooltip in the form of tag, add w3-tag class to the span tag which contains the tooltip text. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    
<p class="w3-tooltip">Italy is one of the best
<span class="w3-text w3-tag w3-blue">(<b>4 Football Worldcup Winner</b>)</span>
football side in Europe</p>


</body>
    
</html>

Download the code Try the code

Open the above webpage in the browser, you should see the text inside the paragraph. However, the text inside the span tag will not be visible at this time. Now hover mouse over the text, you shall see tooltip text appear in the form of a tag.

Image Tooltip

It is very easy to create an image tooltip. Simply wrap image within a div with class “w3-tooltip”. Rest of the process is similar.
Simply add tooltip text within a span tag. Take a look at the following code sample.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-tooltip">

  <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="Car">
      <p class="w3-text">This is a beautiful picture.</p>
</div>


</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .