滚动垂直导航项hover时Tooltip被截断的解决方法咨询

问题根源 #

你的父容器（.leftnav-wrapper或React中的.leftNavigation）设置了overflow-x: hidden，同时Tooltip作为列表项的子元素，定位范围被限制在父容器内，导致hover时Tooltip被父容器的宽度截断。

可行解决方案 #

方案一：修改父容器横向溢出规则

父容器只需要纵向滚动，不需要隐藏横向内容，直接将overflow-x: hidden改为overflow-x: visible即可让Tooltip突破父容器限制：

• 复现代码修改：

.leftnav-wrapper {
  width: 68px;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: visible; /* 替换原overflow-x: hidden */
  position: fixed;
  z-index: 999;
}

• React CSS模块修改：

.leftNavigation {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  width: var(--left-navigation-width);
  user-select: none;
  align-items: center;
  z-index: 999;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  overflow-x: visible; /* 替换或新增这一行 */
  position: relative;
}

方案二：将Tooltip挂载到body（React场景优先）

如果父容器必须保留overflow-x: hidden，可以用React的createPortal将Tooltip直接挂载到document.body，脱离父容器的定位限制：

1. 封装Portal版Tooltip组件：

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './Tooltip.module.css';

export default function Tooltip({ show, position, children }) {
  if (!show) return null;
  return ReactDOM.createPortal(
    <div 
      className={styles.tooltip}
      style={{ left: `${position.x + 8}px`, top: `${position.y}px` }}
    >
      {children}
    </div>,
    document.body
  );
}

2. 在列表项中使用并监听hover事件：

import React, { useState } from 'react';
import styles from './LeftNavigation.module.css';
import Tooltip from './Tooltip';

export default function LeftNavigation() {
  const [tooltipState, setTooltipState] = useState({
    show: false,
    text: '',
    position: { x: 0, y: 0 }
  });

  const handleItemHover = (e, text) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setTooltipState({
      show: true,
      text,
      position: { x: rect.right, y: rect.top }
    });
  };

  const handleHoverLeave = () => {
    setTooltipState(prev => ({ ...prev, show: false }));
  };

  return (
    <div className={styles.leftNavigation}>
      <div 
        className={styles.listitem}
        onMouseEnter={(e) => handleItemHover(e, 'Example Item Name')}
        onMouseLeave={handleHoverLeave}
      >
        <button>A</button>
      </div>
      <Tooltip 
        show={tooltipState.show}
        position={tooltipState.position}
      >
        {tooltipState.text}
      </Tooltip>
      {/* 其他列表项 */}
    </div>
  );
}

3. 给Tooltip添加基础样式：

/* Tooltip.module.css */
.tooltip {
  position: fixed;
  z-index: 1000; /* 确保比导航z-index高 */
  background-color: #2d3748;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

方案三：调整Tooltip的定位父级

将相对定位从列表项移到导航容器，让Tooltip基于整个导航定位，避免被父容器截断：

/* 复现代码修改 */
.leftnav {
  position: relative; /* 设置为Tooltip的定位父级 */
}
.listitem {
  /* 移除position: relative */
}
.listitem-name {
  position: absolute;
  left: 100%; /* 从导航右侧向外显示 */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  display: none;
  z-index: 1000;
}
.listitem:hover .listitem-name {
  display: block;
}

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