React中通过useRef触发兄弟组件mouseenter实现Tooltip联动失败

你的思路核心问题在于：手动派发mouseenter事件不会触发CSS的:hover伪类状态。CSS的:hover是浏览器基于真实用户交互（比如实际鼠标移入）维护的原生状态，通过dispatchEvent模拟的事件不会更新这个状态，所以兄弟组件的Tooltip不会弹出。

下面给出两种可行的实现方案：

方案一：用状态控制类名替代纯CSS :hover #

放弃依赖:hover伪类，改用React状态控制自定义类名，通过父组件共享状态实现兄弟组件联动：

父组件代码 #

const ParentComponent = () => {
  const [tooltipActive, setTooltipActive] = useState(false);

  return (
    <div>
      <MyComponent
        stuff="组件A"
        ttText="组件A的提示"
        tooltipActive={tooltipActive}
        onMouseEnter={() => setTooltipActive(true)}
        onMouseLeave={() => setTooltipActive(false)}
      />
      <MyComponent
        stuff="组件B"
        ttText="组件B的提示"
        tooltipActive={tooltipActive}
        onMouseEnter={() => setTooltipActive(true)}
        onMouseLeave={() => setTooltipActive(false)}
      />
    </div>
  );
};

子组件代码 #

const MyComponent = ({ stuff, ttText, tooltipActive, onMouseEnter, onMouseLeave }) => {
  return (
    <span
      className={tooltipActive ? 'tooltip-active' : ''}
      style={{ color: 'red' }}
      data-tooltip={ttText}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {stuff}&nbsp;
    </span>
  );
};

CSS修改 #

/* 默认隐藏Tooltip */
span[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* 真实hover和状态触发都显示Tooltip */
span[data-tooltip]:hover:after,
span.tooltip-active[data-tooltip]:after {
  opacity: 1;
}

方案二：纯CSS父容器联动（仅适用于简单场景） #

如果不需要精确控制单个组件触发，而是只要鼠标在任意兄弟组件上就显示所有Tooltip，可以把兄弟组件放在同一个父容器下，通过父容器的:hover控制所有子元素的Tooltip：

HTML结构 #

<div className="tooltip-group">
  <span data-tooltip="提示1" style={{ color: 'red' }}>组件1&nbsp;</span>
  <span data-tooltip="提示2" style={{ color: 'red' }}>组件2&nbsp;</span>
</div>

CSS代码 #

.tooltip-group span[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip-group:hover span[data-tooltip]:after {
  opacity: 1;
}

这种方式完全不需要JS，但只能实现“父容器内任意元素hover则所有Tooltip显示”的效果，灵活性不如方案一。

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