React悬浮图标触发Tooltip时原图标消失问题解决方法

现有渲染逻辑使用三元运算符做互斥条件渲染：当hover状态为true时，DOM中直接用InstallmentInformation组件替换了AS.InfoIcon图标节点，图标被卸载自然会消失。

不要做二选一的互斥渲染，保持图标节点始终挂载，仅根据hover状态控制分期信息Tooltip的显隐即可，同时通过定位样式让Tooltip浮动展示，不挤占原有图标位置。

原有状态控制逻辑无需修改，仅调整渲染结构代码如下：

<div 
  style={{ position: 'relative', display: 'inline-block' }}
  onMouseEnter={onHover} 
  onMouseLeave={onLeave}
>
  {/* 图标始终渲染，不会被替换 */}
  <AS.InfoIcon />
  {/* 悬浮时才渲染Tooltip，绝对定位浮在图标上方 */}
  {hover && (
    <div
      style={{
        position: 'absolute',
        bottom: 'calc(100% + 8px)',
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 1000,
        // 以下为Tooltip基础样式，可根据设计规范自行调整
        background: '#ffffff',
        padding: '12px',
        borderRadius: '4px',
        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.12)',
        whiteSpace: 'nowrap'
      }}
    >
      <InstallmentInformation installmentList={props.location.state.toBePaidList} />
    </div>
  )}
</div>

优化建议 #

• 外层容器设置position: relative是作为内部绝对定位Tooltip的定位参照，避免Tooltip位置偏移
• 给Tooltip设置足够高的z-index，防止被其他页面元素遮挡
• 如果项目中已经引入了React组件库（如Ant Design、Arco Design、MUI等），可以直接使用组件库内置的Tooltip组件，不需要手动维护hover状态，用法更简单：

import { Tooltip } from '你使用的组件库';

// 渲染部分
<Tooltip title={<InstallmentInformation installmentList={props.location.state.toBePaidList}/>}>
  <AS.InfoIcon />
</Tooltip>

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