父级div设overflow-x:auto后如何让tooltip保持可见？

问题根源在于：当父元素设置overflow-x:auto时，浏览器会创建一个裁剪上下文——任何超出该容器边界的子元素都会被自动裁剪，哪怕设置z-index也无法突破这个限制，因为z-index仅在同一个堆叠上下文中生效。

下面提供两种可行的解决方案：

方案1：将Tooltip移出滚动容器DOM结构（推荐） #

把Tooltip放在滚动容器的外部（同级节点），通过JS监听鼠标悬停事件，动态计算目标元素的位置并设置Tooltip的显示状态和内容，完全避开滚动容器的裁剪限制。

代码示例 #

<!-- 横向滚动容器 -->
<div class="scroll-container">
  <div class="user-item">
    <img src="avatar-1.jpg" alt="用户头像">
    <span class="user-name" data-tooltip="张三 · 共同好友12人 · 来自北京">张三</span>
  </div>
  <div class="user-item">
    <img src="avatar-2.jpg" alt="用户头像">
    <span class="user-name" data-tooltip="李四 · 共同好友8人 · 来自上海">李四</span>
  </div>
  <!-- 更多用户项 -->
</div>
<!-- 全局Tooltip（放在滚动容器外） -->
<div class="tooltip" id="global-tooltip"></div>

.scroll-container {
  overflow-x: auto;
  background: gray;
  white-space: nowrap;
  padding: 10px;
}
.user-item {
  display: inline-block;
  text-align: center;
  margin: 0 8px;
}
.user-name {
  cursor: pointer;
  color: #1877f2;
}
.tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  z-index: 1000;
  /* 实现偏左展示 */
  transform: translateX(-80%);
}

const userNameEls = document.querySelectorAll('.user-name');
const tooltip = document.getElementById('global-tooltip');

userNameEls.forEach(el => {
  el.addEventListener('mouseover', (e) => {
    // 读取预设的tooltip内容
    const tipText = el.getAttribute('data-tooltip');
    tooltip.textContent = tipText;
    
    // 获取元素在视口中的位置，加上页面滚动偏移量
    const rect = el.getBoundingClientRect();
    tooltip.style.left = `${rect.left + window.scrollX}px`;
    tooltip.style.top = `${rect.top + window.scrollY - 35}px`;
    
    tooltip.style.display = 'block';
  });
  
  el.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
  });
});

方案2：用Clip-Path替代Overflow实现裁剪（CSS技巧，有局限性） #

利用CSS的clip-path属性仅裁剪横向溢出的内容，同时保留纵向内容的溢出权限，避开浏览器对overflow-x和overflow-y的强制规则（当overflow-x为auto/scroll时，overflow-y:visible会被强制改为auto）。

代码示例 #

.scroll-container {
  /* 移除overflow-x:auto，改用clip-path */
  white-space: nowrap;
  background: gray;
  padding: 10px;
  /* 仅裁剪容器内部横向溢出的内容，纵向允许溢出 */
  clip-path: inset(0 0 0 0);
  /* 保留横向滚动条 */
  overflow-x: auto;
  /* 强制纵向溢出可见（部分浏览器需要） */
  overflow-y: visible;
}
.user-item {
  display: inline-block;
  text-align: center;
  margin: 0 8px;
  position: relative;
}
/* 鼠标悬停时显示Tooltip */
.user-name:hover + .tooltip {
  display: block;
}
.tooltip {
  position: absolute;
  top: -35px;
  left: -80%;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  z-index: 1000;
}

局限性 #

• 部分旧版浏览器（如IE11）不支持clip-path；
• 滚动条的样式可能需要额外调整，部分浏览器下滚动条的位置可能和预期有偏差。

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