Add hover text without javascript like we hover on a user's reputation

Calibration of tooltip positioning

Precise alignment of your hover text is crucial. Use CSS to ensure your tooltips appear where you want them to:

.tooltip {
  position: relative; /* Base camp for tooltip */
  display: inline-block;  /* Keep it tight */
}

.tooltip .tooltiptext {
  visibility: hidden;  /* Hide the goods */
  width: 120px;  /* Set a boundary */
  position: absolute;  /* Free spirit */
  bottom: 100%;  /* Vertical anchoring */
  left: 50%;  /* Horizontal anchoring */
  margin-left: -60px;  /* Tooltip's belly button */
  opacity: 0; /* Invisible but present */
  transition: opacity 0.3s; /* CSS version of slow-mo movie effect */
}

.tooltip:hover .tooltiptext {
  visibility: visible;  /* Peekaboo! */
  opacity: 1; /* Still here... */
}


<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>


Beautiful tooltips with HTML semantics

To enhance your content's meaning, utilize the <abbr> tag for abbreviations that display tooltip:

<abbr title="Hypertext Markup Language">HTML</abbr>


Creative Styling: CSS that makes your tooltip shine

Upgrade your tooltips from basic black-and-white to custom color palette:

.tooltip .tooltiptext {
  background-color: #f2f2f2; /* Tooltip goes to the beach */
  color: #2a2a2a; /* Because black is too mainstream */
}


Explainer

Visualize tooltips as sticky notes that appear when you hover:

<a href="#" title="Helpful info ahead!">🔗 Hover me!</a>


On hover:

Before:     [🔗]
Hovering:  [🔗💬]

Here, the title attribute 🏷️ provides a tidbit of useful info. Wonder of HTML, no JavaScript! 🚀

Advanced learning

Ensuring accessibility

Screen readers may not read out the title tooltip. For mission-critical info validation, use aria-label:

<button aria-label="Delete post" title="Delete">
  <img src="delete-icon.png" alt="">
</button>


Multi-line tooltips

If one line just isn't enough, break lines:

.tooltip .tooltiptext {
  white-space: pre-line; /* Split personality behavior */
}


<span class="tooltiptext">
  Extra, extra! Read all about it! \A Breaking news on the second line!
</span>


Overflow solutions

If tooltips are cut off at window edges, avoid overflow:

.tooltip .tooltiptext {
  overflow: visible; /* Make sure tooltip is no longer shy */
}


Interactive tooltips

Without JavaScript, you can still make tooltips interact using CSS's :active:

.tooltip:active .tooltiptext {
  visibility: visible; /* "Active" means "SHOW UP!" */
  opacity: 1; /* Hello, world! */
}
