Tooltip无法显示问题求助：已尝试HTML及CSS实现仍无效

Hey there! Let's dig into why your tooltip isn't showing up—there are a couple of critical issues with your current approach:

1. Images don't support pseudo-elements (::after/::before) #

Browsers treat <img> as a replaced element—this means they don't generate pseudo-element content for it. Your #error::after rule is completely ignored because the image can't host that pseudo-element. The fix here is to wrap your image in a container (like a <span> or <div>) and attach the tooltip to that container instead.

2. Your absolute-positioned tooltip has no positioning context #

Even if the pseudo-element worked, your position: absolute on the tooltip doesn't have a relative parent to anchor to. Without position: relative on a parent element, the tooltip will position itself relative to the entire document—probably off-screen where you can't see it.

Here's the fixed code #

First, update your HTML to wrap the image in a container:

<span id="error-tooltip-container">
  <img src="https://symboldev.pp.ua/_data/error-sign.svg" alt="Error" id="error">
</span>

Then adjust your CSS to target the container, add positioning context, and polish the tooltip:

#error-tooltip-container {
  position: relative; /* Anchors the absolute tooltip */
  display: inline-block; /* Keeps the container tight around the image */
}

#error {
  height: 30px;
  width: 30px;
}

#error-tooltip-container::after {
  content: "Here is the tooltip text";
  display: block;
  width: 300px;
  padding: 8px 12px;
  background: #555;
  color: #fff; /* Makes text readable on dark background */
  border-radius: 4px; /* Rounded corners for better UX */
  position: absolute;
  bottom: 125%; /* Places tooltip above the icon */
  left: 50%;
  transform: translateX(-50%); /* Centers tooltip horizontally */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease; /* Smooth fade-in/out */
}

#error-tooltip-container:hover::after {
  visibility: visible;
  opacity: 1;
}

Quick notes on the changes: #

• The container gives us a valid target for the pseudo-element and a positioning anchor
• Added text color, padding, and border-radius to make the tooltip usable
• Used opacity alongside visibility to create a smooth transition (visibility alone is instant and jarring)
• Centered the tooltip relative to the icon so it looks clean

If you wanted to use your original <span id="error-dropdown"> instead of a pseudo-element, you could also set that span to position: absolute and toggle its visibility on hover—but the pseudo-element approach is cleaner for simple tooltips.

内容的提问来源于stack exchange，提问作者Michael