屏幕缩小时div位置偏移 tooltip定位问题解决方案

问题1：屏幕尺寸缩小时Tooltip关联容器偏移 #

• 触发场景：光标悬停图标触发Tooltip展示时，屏幕尺寸缩小会导致对应div出现位置偏移
• 修复方案：为.installmentinfo__container类添加以下两个CSS属性即可解决偏移问题：

.installmentinfo__container {
  margin: auto;
  transform: translateX(-250px);
}

问题2：Tooltip展开后与图标对齐偏差 #

• 问题表现：展开的Tooltip未精准对齐图标位置，下拉Tooltip与图标之间存在多余间距，预期效果为Tooltip显示在图标左下角，与图标无空隙
• 修复状态：该问题已自行修复完成

参考效果截图 #

关联实现代码 #

JSX/HTML代码 #

<div className="installmentinfo__container">
  {
    props.installmentList?.map((e, i) => {
      return (
        <div className="installmentinfo">
          <div className="column">
            <div className="installmentnumber" >{(i + 1).toString()}</div>
            <div className="installmentdate">{e.date}</div>
            <div className="installmentamount">{e.amount} {e.currency}</div>
          </div>
        </div>
      );
    })
  }
</div>

CSS代码（SCSS语法） #

.installmentinfo__container {
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  max-width: 300px;
  box-shadow: 2px 2px 4px 4px #d1d1d1;
  position: absolute;
  right: 340px;
  background-color: white;

  &:last-of-type {
    border-bottom: none;
  }

  .installmentinfo {
    width: 280px;
    height: auto;
    padding: 0em 1em;

    .column {
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
    }

    .installmentnumber {
      float: left;
    }

    .installmentdate {
      width: 50%;
      color: black !important;
    }

    .installmentamount {
      width: 50%;
      color: black !important;
      font-weight: 1000;
    }
  }
}

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