滚动侧边栏Tooltip不显示问题求助（附代码示例）

你的tooltip无法显示的核心原因是tooltip的定位left属性被注释，结合滚动侧边栏的特性，调整以下代码即可解决问题：

纯CSS修复方案 #

修改关键CSS代码，确保tooltip正确显示在侧边栏外侧：

1. 恢复并调整tooltip的定位属性

.sidebar li .tooltip {
  position: absolute;
  top: -20px;
  left: calc(100% + 15px); /* 让tooltip显示在菜单项右侧 */
  z-index: 999; /* 提高层级避免被遮挡 */
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease, top 0.4s ease;
}

2. 优化侧边栏溢出设置（保持横向内容可见）

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 78px;
  background: #11101D;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
  overflow-x: visible; /* 允许tooltip横向溢出 */
  overflow-y: auto; /* 无滚动时自动隐藏滚动条 */
}

3. 保留菜单项的相对定位（原代码已实现，无需修改）

.sidebar li {
  position: relative;
  margin: 8px 0;
  list-style: none;
}

效果说明 #

• 侧边栏收起时，鼠标悬停菜单项，tooltip会显示在侧边栏右侧
• 侧边栏展开时，tooltip自动隐藏（原逻辑已保留）
• 滚动侧边栏时，tooltip会跟随对应菜单项同步移动

可选JS增强方案（灵活控制） #

如果需要自定义tooltip的显示逻辑或样式，可以用JS动态创建tooltip：

const sidebar = document.querySelector(".sidebar");

// 遍历所有带tooltip的菜单项
document.querySelectorAll('.sidebar li').forEach(li => {
  const tooltipText = li.querySelector('.tooltip').textContent;
  
  // 创建自定义tooltip元素
  const tooltip = document.createElement('div');
  tooltip.className = 'custom-tooltip';
  tooltip.textContent = tooltipText;
  tooltip.style.cssText = `
    position: fixed;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 999;
  `;
  
  // 鼠标进入时显示tooltip
  li.addEventListener('mouseenter', () => {
    if (!sidebar.classList.contains('open')) {
      document.body.appendChild(tooltip);
      const rect = li.getBoundingClientRect();
      // 定位到菜单项右侧居中位置
      tooltip.style.left = `${rect.right + 15}px`;
      tooltip.style.top = `${rect.top + rect.height/2 - tooltip.offsetHeight/2}px`;
      setTimeout(() => tooltip.style.opacity = '1', 10);
    }
  });
  
  // 鼠标离开时移除tooltip
  li.addEventListener('mouseleave', () => {
    tooltip.remove();
  });
});

同时隐藏原tooltip元素：

.sidebar li .tooltip {
  display: none;
}

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