如何在HTML中让元素突破容器显示？解决tooltip被裁剪问题

为容器内的元素制作自定义tooltip时，因容器设置了overflow: auto，tooltip被容器裁剪（虽可滚动查看，但希望无需滚动直接显示）。尝试使用z-index无效，需要让tooltip弹出容器边缘，且hover效果仅作用于元素本身而非容器。

示例代码：

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

.tooltip:hover .tooltiptext {
  display: block;
}

<div class='box'>
  <div class='tooltip'> Hover for tooltip
    <div class='tooltiptext'>
      Wow, this is amazing, such an epic tooltip text
    </div>
  </div>
</div>

核心原因是：overflow: auto会裁剪所有属于该容器定位上下文的元素，你的tooltip是absolute定位且父级.tooltip是容器内的relative元素，因此仍属于.box的定位上下文，z-index无法突破这个限制。以下两种可行方案：

方案1：改用fixed定位让tooltip脱离容器限制 #

将tooltip文本改为fixed定位（相对于视口），脱离.box的overflow范围，同时调整位置使其对齐目标元素：

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  display: inline-block;
  /* 移除relative，避免成为tooltiptext的定位上下文 */
  position: static;
}

.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  /* 改为fixed定位，脱离父容器overflow限制 */
  position: fixed;
  z-index: 1000000;
  /* 调整位置到元素下方，可根据需求修改 */
  top: calc(100% + 5px);
  left: 0;
}

.tooltip:hover .tooltiptext {
  display: block;
}

方案2：调整DOM结构，将tooltip移出容器 #

把tooltip文本从.box中移出，通过JS监听hover事件控制tooltip的显示和位置，兼容性更广泛：

修改后的HTML #

<div class='box'>
  <div class='tooltip'> Hover for tooltip </div>
</div>
<!-- 把tooltiptext移到容器外 -->
<div class='tooltiptext'>
  Wow, this is amazing, such an epic tooltip text
</div>

修改后的CSS #

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  display: inline-block;
}

.tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

配套JS代码 #

const tooltip = document.querySelector('.tooltip');
const tooltipText = document.querySelector('.tooltiptext');

tooltip.addEventListener('mouseenter', () => {
  const rect = tooltip.getBoundingClientRect();
  // 将tooltip定位到目标元素的下方
  tooltipText.style.top = `${rect.bottom + window.scrollY}px`;
  tooltipText.style.left = `${rect.left + window.scrollX}px`;
  tooltipText.style.display = 'block';
});

tooltip.addEventListener('mouseleave', () => {
  tooltipText.style.display = 'none';
});

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