CSS Tooltip

A CSS tooltip is a small, often rectangular pop-up box that appears when a user hovers over or clicks on an element on a webpage, such as a link or an image. It provides additional information about the element or offers context without requiring the user to navigate away from the current page.

CSS tooltips are typically implemented using HTML and CSS without the need for JavaScript. They are commonly used to provide descriptions, additional details, or hints about the purpose or functionality of UI elements. CSS tooltips can be customized in terms of appearance, including size, color, font, and positioning, using CSS properties such as background-color, color, border, padding, and position.

Example

 .tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<body>
<div class="tooltip">
  Hover over me
  <span class="tooltiptext">This is a tooltip!</span>
</div>
</body>

You can click on above box to edit the code and run again.

Output

In this example, when you hover over the "Hover over me" text, a tooltip with the content "This is a tooltip!" will appear above it. The appearance and positioning of the tooltip are controlled using CSS.