如何用CSS使span tooltip相对对应img定位（不可修改HTML结构）

方法一：使用Grid布局（推荐） #

这种方法无需依赖定位上下文，直接通过Grid将每个img和对应的span绑定到同一单元格，轻松实现tooltip在img上方居中的效果，同时支持任意数量的图片：

.parent-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, min-content); /* 自动适配图片数量 */
  gap: 30px; /* 图片间的间距，可根据需求调整 */
  align-items: center;
}

img {
  grid-column: auto;
  grid-row: 1; /* 所有图片统一放在第一行 */
}

img + span {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  grid-column: span 1; /* 和对应img占用同一列 */
  grid-row: 1; /* 和对应img占用同一行 */
  justify-self: center; /* 水平居中对齐 */
  margin-top: -40px; /* 向上偏移到图片上方，数值按需调整 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 可选：添加阴影增强视觉层级 */
}

img:hover + span {
  visibility: visible; /* 悬停图片时显示对应的tooltip */
}

方法二：使用定位技巧（兼容旧浏览器） #

如果需要兼容不支持Grid的旧浏览器，可以用定位实现，核心是通过手动计算偏移量让tooltip对应到自身的img：

.parent-div {
  position: relative;
  font-size: 0; /* 消除inline-block元素间的默认空白间距 */
}

img {
  display: inline-block;
  position: relative;
  font-size: 16px; /* 重置字体大小，避免影响文本显示 */
  margin: 0 15px; /* 图片间的间距 */
}

img + span {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  top: -40px; /* 向上偏移到图片上方 */
  transform: translateX(-50%); /* 水平居中 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 为每个span计算相对于对应img的left值，示例为2张图片的情况 */
img:first-of-type + span {
  left: calc(50% - 15px); /* 结合img的margin调整位置 */
}

img:nth-of-type(2) + span {
  left: calc(50% + 50px + 15px); /* 基于第一张图片的宽度+margin计算，数值按需调整 */
}

/* 若有更多图片，需依次添加:nth-of-type选择器调整left值 */

img:hover + span {
  visibility: visible;
}

方案对比 #

• Grid布局：代码简洁、扩展性强，无需手动计算位置，自动适配任意数量的图片，是现代浏览器环境的首选方案。
• 定位技巧：兼容性更好（支持旧版IE），但需要为每个图片对应的tooltip手动计算偏移量，仅适合图片数量固定的场景。

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