CodesJava

Easy learning with example program codes

CSS Tooltips

To display any additional info on moving the mouse cursor over an element, the CSS Tooltip is used.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted red;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: crimson;
  color: white;
  text-align: center;
  padding: 5px;
 
  position: absolute;
  z-index: 5;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
  <span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are creating a basic tooltip. Move the cursor of the mouse over the element to see the tooltip.

Ways to display the position of the tooltip information:

  • The top of the element
  • The left side of the element
  • The right side of the element
  • The bottom of the element

Top Tooltip:

The tooltip information renders on the top of an element, on moving the mouse cursor over the element.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted red;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: crimson;
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
 
  position: absolute;
  z-index: 5;
  bottom: 100%;
  left: 50%;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
  <span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are creating a top tooltip. Move the cursor of the mouse over the element to see the tooltip.

Bottom Tooltip:

The tooltip information renders on the bottom of an element, on moving the mouse cursor over the element.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 5px dotted red;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: crimson;
  color: white;
  text-align: center;
  padding: 5px;
 
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
  <span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are creating a bottom tooltip. Move the cursor of the mouse over the element to see the tooltip.

Left Tooltip:

The tooltip information renders on the left side of an element, on moving the mouse cursor over the element.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 5px dotted red;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: crimson;
  color: white;
  text-align: center;
  padding: 5px;
 
  position: absolute;
  z-index: 2;
  top: -5px;
  right: 105%;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
  <span class="tooltiptext">Hello!!</span>
</div> 
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are creating a left tooltip. Move the cursor of the mouse over the element to see the tooltip.

Right Tooltip:

The tooltip information renders on the right side of an element, on moving the mouse cursor over the element.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted red;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: crimson;
  color: white;
  text-align: center;
  padding: 5px;
 
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 105%;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
  <span class="tooltiptext">Hello!!</span>
</div> 
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are creating a right tooltip. Move the cursor of the mouse over the element to see the tooltip.

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status