多行文本时Tooltip定位异常问题求助

问题原因 #

你当前的Tooltip采用top: -45%结合transform: translate(-50%, -50%)的定位方式，单行文本时高度固定，位置能正常显示；但文本变为多行后，Tooltip自身高度增加，translateY(-50%)会基于新高度向上额外偏移，再加上基于父元素高度的top: -45%，就导致整体定位错位。

解决办法 #

调整Tooltip文本容器的定位逻辑，改用底部对齐的方式，确保无论Tooltip高度如何变化，都能保持与触发元素的正确相对位置。修改后的Sass代码如下：

&--tooltip {
  cursor: pointer;
  position: relative;
  display: inline-block;

  &:hover {
    .tooltip--text {
      visibility: visible;
      opacity: 1;
    }
  }

  &--text {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    width: 120px;
    max-width: 200px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 3px 8px;
    opacity: 0;
    transition: .3s;
    // 核心修改部分
    bottom: 100%; // 让Tooltip底部对齐父元素顶部
    left: 50%;
    transform: translateX(-50%); // 仅做水平居中
    margin-bottom: 5px; // 控制Tooltip与触发元素的间距，可按需调整

    &--arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      // 箭头位置对应调整
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000;
    }
  }
}

改动说明 #

1. bottom: 100%：将Tooltip的底部边缘对齐到触发元素的顶部边缘，垂直方向的基准位置不再受Tooltip自身高度影响。
2. transform: translateX(-50%)：仅处理水平方向的居中，避免垂直偏移干扰定位。
3. margin-bottom：用来控制Tooltip和触发元素之间的空隙，可根据视觉需求调整数值。
4. 箭头改为top: 100%：让箭头从Tooltip底部伸出，精准指向触发元素，保持视觉连贯性。

修改后，无论是单行还是多行文本，Tooltip都能稳定显示在触发元素的正上方，不会再出现定位错位问题。

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