添加overflow-y:auto后导航栏左侧tooltip无法显示的问题

问题原因 #

当为.scrollable-items设置overflow-y: auto后，浏览器会自动将overflow-x的计算值设为auto（即使声明了unset），这会导致容器横向溢出的内容被强制裁剪。你的Tooltip是绝对定位在滚动容器内部的.cx-mainnav-hoverwrapper中，当Tooltip超出滚动容器的边界时，就会被裁剪隐藏。

解决方案（纯CSS实现） #

通过调整Tooltip的定位层级，让它脱离滚动容器的裁剪范围，同时保留滚动和Hover显示效果：

修改后的代码 #

CSS

/* 添加外层容器作为Tooltip的定位基准 */
.nav-wrapper {
  position: relative;
  display: inline-block;
}

.scrollable-items {
  height: 100px;
  overflow-y: auto;
  width: 60px;
}

.cx-mainnav-hoverwrapper {
  margin: 10px 0;
  /* 移除原有的position: relative，让Tooltip相对于外层.nav-wrapper定位 */
}

.cx-mainnav-hoverlabel {
  position: absolute;
  top: 0;
  left: -130px; /* 调整为左侧显示，可根据Tooltip宽度修改数值 */
  white-space: nowrap;
  padding: 4px 8px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* 监听hover容器触发Tooltip显示，逻辑更稳定 */
.cx-mainnav-hoverwrapper:hover .cx-mainnav-hoverlabel {
  opacity: 1;
}

HTML

<div class="nav-wrapper">
  <div class="scrollable-items">
    <div class="cx-mainnav-hoverwrapper">
      <div class="cx-mainnav">Icon 1</div>
      <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
    </div>
    <div class="cx-mainnav-hoverwrapper">
      <div class="cx-mainnav">Icon 2</div>
      <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
    </div>
    <div class="cx-mainnav-hoverwrapper">
      <div class="cx-mainnav">Icon 3</div>
      <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
    </div>
    <div class="cx-mainnav-hoverwrapper">
      <div class="cx-mainnav">Icon 4</div>
      <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
    </div>
    <div class="cx-mainnav-hoverwrapper">
      <div class="cx-mainnav">Icon 5</div>
      <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
    </div>
  </div>
</div>

关键改动说明 #

1. 新增外层定位容器：添加.nav-wrapper并设置position: relative，作为Tooltip的定位基准，让Tooltip脱离滚动容器的裁剪范围。
2. 调整Tooltip定位：将left设为负值实现左侧显示，添加white-space: nowrap防止Tooltip换行变形。
3. 优化Hover触发逻辑：使用容器Hover替代原相邻元素选择器，触发更稳定，避免元素结构变化导致失效。

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