CSS Tooltip Text

A tooltip is a small hover box that appears when the user moves their mouse over an element. It’s commonly used to provide additional information, hints, or labels without cluttering the UI.

Tooltips improve accessibility and user understanding, especially on buttons, icons, or labels that need brief explanations.

How Tooltips Work

In CSS, we typically use a combination of:

A wrapper element (e.g., a <span> or <div>)
A hidden <span> or pseudo-element that acts as the tooltip
Visibility toggled on :hover

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Tooltip – Learn With Arshyan</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
      font-family: Arial, sans-serif;
    }

    .tooltip-container .tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Position above the element */
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .tooltip-container:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>

  <h2>CSS Tooltip Example – Learn With Arshyan</h2>

  <p>
    Hover over this 
    <span class="tooltip-container">
      keyword
      <span class="tooltip-text">This is a helpful tooltip text.</span>
    </span> 
    to see the tooltip.
  </p>

</body>
</html>

What Each Value Means:

The .tooltip-container wraps the element you want to apply the tooltip to.
The .tooltip-text is hidden by default (visibility: hidden; opacity: 0).
On hover, CSS makes it visible and fades it in smoothly using a transition.
It appears above the element using bottom: 125% and is centered horizontally.

Enhancing Tooltips

You can customize tooltips further:

Add transition-delay for delayed appearance
Use ::after pseudo-elements for minimal HTML
Change position to the right, left, or below
Add arrow using ::after with CSS borders

Summary Table

Feature	Behavior
Tooltip trigger	On hover
Tooltip text	Hidden by default
Show effect	Controlled by `:hover` and `transition`
Use cases	Hints, labels, helper notes

Learn With Arshyan Tip:

Tooltips should be short and useful. Avoid showing too much information—keep them focused and readable even on small screens.