为Tooltip-Wrapper添加箭头图标失败问题排查

你猜的没错，overflow:auto就是箭头消失的罪魁祸首——伪元素作为.tooltip-wrapper的子元素，会被容器的overflow属性直接裁剪掉。再加上当前箭头和tooltip的位置设置也有偏差，需要调整结构和样式来解决。

解决方案 #

1. 新增内部包裹层，把overflow:auto和内容限制属性移到内层，外层只负责定位和承载箭头伪元素
2. 调整tooltip的位置，让它正确悬浮在目标元素上方
3. 修正箭头伪元素的定位，使其指向目标元素

修改后的完整代码 #

CSS 代码

.parent {
  display: inline-flex;
  position: relative;
  font-weight: 900;
}

.tooltip-wrapper {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px); /* 让tooltip在目标元素上方，预留箭头空间 */
  left: 50%;
  transform: translateX(-50%);
  padding: 0; /* 把padding移到内层，避免干扰箭头定位 */
}

.tooltip-content-wrap {
  overflow: auto;
  max-height: 60px; /* 调整为合理高度，原20px过小会直接触发滚动 */
  max-width: 200px;
  width: max-content;
  padding: 10px;
  background-color: blue;
}

.parent:hover .tooltip-wrapper {
  display: block;
}

.tooltip-content {
  font-weight: normal;
  color: white;
}

.tooltip-wrapper::after {
  content: "";
  position: absolute;
  top: 100%; /* 让箭头位于tooltip底部 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 5px 0 5px; /* 调整边框方向，使箭头向下指向目标元素 */
  border-color: blue transparent transparent transparent; /* 箭头颜色与tooltip背景一致 */
}

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <section>
      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      <div class="parent">
        <span class="tooltip-wrapper">
          <span class="tooltip-content-wrap">
            <span class="tooltip-content">
              sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
              aliquyam
            </span>
          </span>
        </span>
        hello world
      </div>
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </section>

    <script src="./src/index.js"></script>
  </body>
</html>

关键调整说明 #

• 新增.tooltip-content-wrap层分离内容和定位逻辑，避免箭头被overflow裁剪
• 修改.tooltip-wrapper的bottom值，确保tooltip悬浮在目标元素正上方
• 调整箭头的边框方向和颜色，使其匹配期望的指向效果
• 迁移padding属性到内层，保证箭头定位计算的准确性

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