行内链接tooltip定位异常：仅首个bottom:100%对齐正确，其余偏移如何解决

问题根因 #

tooltip偏移的核心原因是hover状态下的transform: translateY(-50%)属性逻辑冲突：

• 你已经给.tooltip设置了bottom: 100%，该规则本身就能让tooltip的底部和.tooltip-container的顶部精准对齐
• 额外叠加的translateY(-50%)会让元素再向上偏移自身高度的50%，三个tooltip的文本长度不同，实际渲染高度存在差异，偏移距离自然不一样，因此出现了高低不齐的问题。

修复方案 #

直接删除hover状态transform中的translateY(-50%)即可，修改后的代码如下：

.tooltip-container:hover .tooltip, a:hover .tooltip {
  opacity: 1.0;
  transform: scale(1);
}

如果需要统一调整tooltip和触发容器之间的间距，给.tooltip新增margin-bottom属性即可，比如要留5px的间距就添加margin-bottom: 5px，所有tooltip的间距都会保持一致，不会受自身高度变化影响。

附加优化建议 #

你给.tooltip设置的justify-content: center和align-items: center当前不生效，需要补充display: flex属性才能实现内部文本的垂直水平居中效果：

.tooltip {
  /* 保留原有其他属性不变 */
  display: flex;
}

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