解决overflow:hidden父元素中relative定位元素的tooltip溢出问题

实现tooltip功能时，希望鼠标悬浮在.element内的<p>元素上时，在其上方显示.tooltip，但由于.parent设置了overflow-y: auto，导致作为.element子元素的tooltip被裁剪，无法完整显示。

核心原因 #

.parent的overflow-y: auto会裁剪所有超出其可视区域的子元素内容，包括.element内部的绝对定位tooltip。要解决这个问题，必须让tooltip的定位容器脱离.parent的裁剪范围，也就是将tooltip的定位父级换成没有overflow限制的.wrapper。

解决方案1：调整HTML结构+CSS定位（纯CSS方案，需浏览器支持:has()） #

将tooltip从.element中移出，放到.wrapper下作为.parent的兄弟元素，通过CSS选择器控制显示和定位：

修改后的HTML #

<div class="wrapper">
  <div class="parent">
    <div class="element">
      <p>Hover mee</p>
    </div>
  </div>
  <div class="tooltip">
    <h3>yeey</h3>
  </div>
</div>

修改后的CSS #

.wrapper {
  position: relative;
}

.parent {
  max-height: 200px;
  overflow-y: auto;
  background: cyan;
  margin: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.element {
  background: green;
  width: min-content;
  padding: 10px;
}

.tooltip {
  position: absolute;
  background: pink;
  opacity: 0;
  z-index: -1;
  pointer-events: none; /* 避免干扰鼠标悬浮事件 */
}

/* 悬浮时显示tooltip并定位到p元素正上方 */
.wrapper:has(.element p:hover) .tooltip {
  opacity: 1;
  z-index: 10;
  top: calc(100px + 10px - 45px); /* 100px是parent的margin-top，10px是padding-top，45px是tooltip高度+间距 */
  left: calc(100px + 10px + 50%); /* 100px是parent的margin-left，10px是padding-left，50%是element半宽 */
  transform: translateX(-50%);
}

注意：:has()选择器需要Chrome 105+、Firefox 121+或Edge 105+以上版本支持。

解决方案2：JS动态计算位置（兼容所有浏览器） #

保持原有HTML结构，修改CSS让tooltip相对于.wrapper定位，通过JS监听悬浮事件，精准计算tooltip的位置：

修改后的CSS #

.wrapper {
  position: relative;
}

.parent {
  max-height: 200px;
  overflow-y: auto;
  background: cyan;
  margin: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.element {
  background: green;
  width: min-content;
  padding: 10px;
}

.tooltip {
  position: absolute;
  background: pink;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

添加JS代码 #

const targetP = document.querySelector('.element p');
const tooltip = document.querySelector('.tooltip');

// 鼠标悬浮时计算并设置tooltip位置
targetP.addEventListener('mouseenter', () => {
  const pRect = targetP.getBoundingClientRect();
  const wrapperRect = document.querySelector('.wrapper').getBoundingClientRect();
  
  // 计算相对于wrapper的坐标
  const top = pRect.top - wrapperRect.top - tooltip.offsetHeight - 10; // 10px是tooltip与p的间距
  const left = pRect.left - wrapperRect.left + (pRect.width / 2) - (tooltip.offsetWidth / 2);
  
  tooltip.style.top = `${top}px`;
  tooltip.style.left = `${left}px`;
  tooltip.style.opacity = '1';
  tooltip.style.zIndex = '10';
});

// 鼠标离开时隐藏tooltip
targetP.addEventListener('mouseleave', () => {
  tooltip.style.opacity = '0';
  tooltip.style.zIndex = '-1';
});

这种方法兼容性更好，能适配所有现代浏览器，且tooltip的位置会随元素滚动自动调整。

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