Tooltip on Hover with CSS

The tooltip is used to display additional information when the user hovers an element. It is very useful when you want to display some extra content within the same webpage. There are various JavaScript plugins are available to add tooltip features in HTML. But, you can create tooltips with CSS without using JavaScript/jQuery.

In this example code snippet, we will create tooltip in HTML with CSS. You can place the tooltip on the left/right/top/bottom with animation when the user mouse over an element. This CSS tooltip on hover can be integrated into any HTML webpage.

Here we will create tooltip for 4 positions, top, right, bottom, and left.

• Top: Add .top class to .tooltiptext element.
• Right: Add .right class to .tooltiptext element.
• Bottom: Add .bottom class to .tooltiptext element.
• Left: Add .left class to .tooltiptext element.

HTML Code:

<div class="tooltip">Top Tooltip
  <span class="tooltiptext top">Tooltip text on top</span>
</div>

<div class="tooltip">Right Tooltip
  <span class="tooltiptext right">Tooltip text on right</span>
</div>

<div class="tooltip">Bottom Tooltip
  <span class="tooltiptext bottom">Tooltip text on bottom</span>
</div>

<div class="tooltip">Left Tooltip
  <span class="tooltiptext left">Tooltip text on left</span>
</div>

CSS Code:

.tooltip {
  position: relative;
  display: inline-block;
  color: #006080;
  border-bottom: 1px dashed #006080;
}
.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 4px;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltiptext.top {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
.tooltiptext.top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltiptext.right {
  top: -12px;
  left: 110%;
}
.tooltiptext.right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #555 transparent transparent;
}

.tooltiptext.bottom {
  top: 135%;
  left: 50%;
  margin-left: -60px;
}
.tooltiptext.bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.tooltiptext.left {
  top: -5px;
  bottom: auto;
  right: 110%;
}
.tooltiptext.left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #555;
}