React & D3 技能气泡悬停时Tooltip闪烁问题排查修复求助

1. 鼠标事件循环触发：当Tooltip显示后，若其DOM元素与触发它的技能气泡位置重叠，会导致鼠标事件被Tooltip拦截，触发气泡的mouseout事件使Tooltip隐藏；随后鼠标重新落在气泡上，又触发mouseover显示Tooltip，如此往复造成闪烁。即使调整z-index，若D3动态修改元素层级或Tooltip仍处于鼠标交互路径上，问题依然存在。
2. D3频繁DOM操作：若hover过程中D3持续对气泡或Tooltip的DOM属性（如位置、样式）进行重绘更新，会导致元素频繁重排，间接触发鼠标事件的反复触发，加剧闪烁问题。
3. 事件类型选择不当：若使用mouseover/mouseout事件，这两个事件会在鼠标进入/离开子元素时也触发，当Tooltip作为气泡的子元素（或视觉上覆盖），会频繁触发事件切换。

• 改用mouseenter/mouseleave事件：在D3绑定事件时，替换mouseover为mouseenter，mouseout为mouseleave。这两个事件仅在鼠标进入/离开目标元素本身时触发，不会因子元素覆盖而误触发，从根源避免事件循环：

  d3.select('.skill-bubble')
    .on('mouseenter', showTooltip)
    .on('mouseleave', hideTooltip);
  

• 给Tooltip添加pointer-events: none样式：让Tooltip不接收任何鼠标事件，即使它覆盖在气泡上方，也不会拦截气泡的hover事件，彻底解决事件冲突：

  .tooltip {
    pointer-events: none;
    /* 其他样式 */
  }
  

• 调整Tooltip位置避免重叠：设置Tooltip的偏移量，使其显示在气泡的非重叠区域（如右侧、上方偏移），确保鼠标不会落在Tooltip上：

  function showTooltip(event, d) {
    d3.select('.tooltip')
      .style('left', `${event.pageX + 10}px`)
      .style('top', `${event.pageY - 10}px`)
      .text(d.skillName)
      .style('display', 'block');
  }
  

• 减少不必要的DOM更新：检查代码中hover时的D3操作，确保仅在mouseenter时初始化/显示Tooltip，mouseleave时隐藏，避免过程中频繁修改DOM属性（如反复设置位置、样式）。
• 固定z-index层级：确保气泡的z-index高于Tooltip，同时在样式中明确设置，避免D3动态修改元素层级覆盖自定义设置：

  .skill-bubble {
    z-index: 10;
  }
  .tooltip {
    z-index: 5;
    pointer-events: none;
  }
  

内容的提问来源于stack exchange，提问作者c2-mrinal