Tooltips in CSS — How to Show Informative Hover Text

Tooltips are small messages that appear when a user hovers over an element, providing extra information.

Basic CSS Tooltip Example

HTML

<div class="tooltip">  Hover over me  <span class="tooltiptext">This is the tooltip text</span></div>

CSS

.tooltip {  position: relative;  display: inline-block;  cursor: pointer;}.tooltip .tooltiptext {  visibility: hidden;  width: 140px;  background-color: #333;  color: #fff;  text-align: center;  border-radius: 5px;  padding: 6px 8px;  /* Position */  position: absolute;  z-index: 1;  bottom: 125%; /* place above the element */  left: 50%;  transform: translateX(-50%);    /* Fade in tooltip */  opacity: 0;  transition: opacity 0.3s;}.tooltip:hover .tooltiptext {  visibility: visible;  opacity: 1;}

Explanation

• The .tooltip container is positioned relative.

• The .tooltiptext is initially hidden (visibility: hidden and opacity: 0).

• On hover, the tooltip becomes visible with a fade-in effect.

• Positioned above the element with bottom: 125% and horizontally centered using left: 50% + transform: translateX(-50%).

Variations

• Position tooltip below, left, right by adjusting top, bottom, left, right values.

• Customize colors, size, arrow pointer using CSS ::after pseudo-element.

Adding an Arrow to Tooltip

.tooltip .tooltiptext::after {  content: "";  position: absolute;  top: 100%; /* arrow below tooltip */  left: 50%;  margin-left: -5px;  border-width: 5px;  border-style: solid;  border-color: #333 transparent transparent transparent;}

Would you like me to create a ready-to-use tooltip component or show you tooltip with animations or interactive tooltips?