悬停文本/图片弹窗显示异常，求HTML+CSS实现方案

错误原因 #

• 使用position: relative作为弹窗定位方式：relative定位元素仍保留原文档流位置，偏移后会挤占周边空间导致布局混乱；同时弹窗默认是block元素，宽度继承父容器100%，自然撑满页面。
• 未给弹窗父元素（<a>）设置非static定位：改用position: absolute时，弹窗会相对于最近的非static定位父元素偏移，若父元素无定位，会相对于视口定位，位置失控甚至超出可视区域无法显示。
• HTML结构不合理：用<br>拆分文本导致text2和A/B被强制换行，不符合同一行布局的需求。

优化实现方案 #

修正后的HTML #

<div class="tooltip-group">
  <div class="tooltip-line">text1</div>
  <div class="tooltip-line">
    text2
    <a href="#" class="tooltip-trigger">A
      <span class="tooltip-popup">
        LineX<br>
        LineY<br>
        LineZ
      </span>
    </a>
    <a href="#" class="tooltip-trigger">B
      <span class="tooltip-popup">
        <img src="image.png" alt="弹窗图片">
      </span>
    </a>
  </div>
  <div class="tooltip-line">text3</div>
</div>

对应的CSS #

/* 让链接看起来像普通文本 */
.tooltip-trigger {
  color: #000;
  text-decoration: none;
  /* 关键：给父元素设置相对定位，让弹窗相对于它偏移 */
  position: relative;
}

/* 弹窗默认隐藏 */
.tooltip-popup {
  display: none;
  /* 绝对定位脱离文档流，不影响布局 */
  position: absolute;
  /* 定位到触发元素的右上方 */
  top: -10px;
  left: 100%;
  margin-left: 8px;
  /* 限制弹窗最大宽度，避免撑满页面 */
  max-width: 200px;
  padding: 8px 12px;
  color: #335500;
  background: #e5e5e5;
  border: 1px solid #666;
  /* 避免弹窗被其他元素遮挡 */
  z-index: 999;
}

/* 悬停时显示弹窗 */
.tooltip-trigger:hover .tooltip-popup {
  display: block;
}

/* 控制每行文本的间距与结构 */
.tooltip-line {
  line-height: 1.5;
  margin: 4px 0;
}

方案说明 #

• 给触发弹窗的<a>设置position: relative，确保弹窗（absolute定位）相对于触发元素精准偏移，不会乱跑。
• 弹窗用position: absolute脱离文档流，彻底解决布局打乱的问题；通过top和left属性设置为右上方位置，margin-left增加间距避免紧贴触发元素。
• 给弹窗设置max-width限制宽度，防止内容过长撑满页面；添加z-index确保弹窗显示在其他元素上层。
• 用<div>包装每行文本，替代<br>，结构更清晰，也能更好控制行间距。

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