Tooltip in CSS

Tooltip in CSS

A tooltip provides an extra information about something when a user hover mouse over an element. You might have seen for some text on a web page, when a user moves mouse cursor over text, a small information about that text pops up. This small information about that text has been provided by using tooltip class.

You can create tooltip in CSS by using pseudo elements (::after and ::before). However, it will make things more difficult to handle. In order to use tooltip, you should have basic working knowledge of CSS.

The following types tootip are used in CSS

  • Basic tootip
  • Positioning tooltip
  • Tooltip arrows
  • Fade in tooltip

Basic tooltip in CSS

A basic tooltip is a simple tooltip and it works when a user simply moves a mouse over the text to which tooltip properties have been applied.

<!DOCTYPE html>
<html>
<style>
    .tooltip {
  position: relative;
  display: block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  text-align: left;
}
.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align:center;
  border-radius: 6px;
  padding: 5px 0;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<p style="background-color: cornflowerblue; width:25%;">Move the mouse over the text below:</p>
<div class="tooltip">Apple
  <span class="tooltiptext">It grows in Kashmir</span>
</div>
</body>
</html>
Basic tooltip in CSS, www.programmingtutorial.in
http://www.programmingtutorial.in

The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover.

Positioning tooltip in CSS

Positioning tooltip is used to show the tooltip text in some particular direction. It can be shown at left, right, top or bottom position of hoverable text. Let us write a code for left and right tooltip.

<!DOCTYPE html>
<html>
<style>
#tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#tooltip1 #tooltiptext1 {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

#tooltip1:hover #tooltiptext1 {
  visibility: visible;
}
#tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#tooltip2 #tooltiptext2 {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

#tooltip2:hover #tooltiptext2 {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div ID="tooltip1">Hover over me
  <span ID="tooltiptext1">Right sTooltip text</span>
</div>
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div ID="tooltip2">Hover over me
  <span ID="tooltiptext2">Left Tooltip text</span>
</div>
</body>
</html>
right tooltip
Right tooltip
left tooltip
Left tooltip

Tooltip arrows in CSS

To create an arrow that should appear from a specific side of the tooltip, add “empty” content after tooltip, with the pseudo-element class::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip and top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Top Tooltip arrow</span>
</div>
</body>
</html>
Tooltip arrows in CSS, www.programmingtutorial.in
Tooltip arrows in CSS