如何与div中前一个元素交互，实现悬停时上方文本适配对齐？

需求 #

• 基础文本左对齐
• 鼠标悬停时，在基础文本正上方显示提示文本
• 提示文本默认居中；若长度超过基础文本，则自动左对齐
• 适配任意长度的文本

遇到的问题 #

无法让提示文本精准定位在基础文本正上方，之前尝试绝对定位只能相对于页面居中，无法和基础文本对齐。

解决方案 #

核心思路：用相对定位的容器包裹提示文本和基础文本，将提示文本放在基础文本之前，通过绝对定位固定在上方；利用inline-block和文本对齐属性实现自适应居中/左对齐效果。

完整代码 #

CSS 代码

.myContainer {
  position: relative;
  display: inline-block; /* 容器宽度贴合基础文本宽度，作为定位基准 */
}

.tooltip {
  position: absolute;
  bottom: 100%; /* 定位到基础文本的正上方 */
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 10px;
  margin-bottom: 4px; /* 和基础文本保持间距 */
  text-align: center; /* 短提示文本时居中显示 */
  transition: opacity 0.2s; /* 平滑显示/隐藏过渡 */
}

.tooltip span {
  display: inline-block;
  text-align: left; /* 文本内容本身左对齐 */
  max-width: 100%; /* 限制宽度不超过容器，避免溢出 */
}

.myContainer:hover .tooltip {
  opacity: 1; /* 悬停时显示提示文本 */
}

.myDIV {
  font-size: 20px;
  text-align: left; /* 基础文本左对齐 */
}

HTML 代码

<!-- 测试短提示：居中显示在基础文本上方 -->
<div class="myContainer">
  <div class="tooltip"><span>Short Answer</span></div>
  <div class="myDIV">Question</div>
</div>

<br><br>

<!-- 测试长提示：自动左对齐，宽度不超过基础文本 -->
<div class="myContainer">
  <div class="tooltip"><span>这是一段比问题文本长很多的提示内容，测试自动左对齐效果，内容再多也不会超出下方问题文本的宽度范围</span></div>
  <div class="myDIV">较长的问题文本用来测试长提示的左对齐效果</div>
</div>

关键说明 #

1. 容器定位：myContainer设置为relative+inline-block，确保容器宽度贴合基础文本，为绝对定位的提示文本提供精准的定位基准。
2. 提示文本定位：tooltip用bottom: 100%固定在基础文本正上方，left:0; right:0确保宽度和容器一致。
3. 自适应对齐：通过tooltip的text-align:center让短提示居中，内部span的text-align:left保证长文本左对齐，max-width:100%避免溢出容器。
4. 交互效果：用opacity加过渡实现平滑的显示/隐藏，提升用户体验。

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