React-Bootstrap Tooltip首次渲染定位异常致页面闪烁求助

项目使用Bootstrap 5.2.1和React-Bootstrap 2.5.0，给Badge组件添加Tooltip功能时，鼠标悬停Badge会出现Tooltip溢出页面、滚动条短暂激活后恢复的闪烁问题，怀疑是定位错误导致。

组件代码如下：

import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
import { BugFill, Globe, ListTask, PcDisplay, Search, Wrench } from "react-bootstrap-icons";

function TaskTypeDisplay(props) {

    const getType = (taskType) => {
        let itaskType = parseInt(props.taskType)
        switch (itaskType) {
            case 1:
                return { color: "bg-warning text-dark", object: <Wrench /> };
            case 2:
                return { color: "bg-warning text-dark", object: <Globe /> };
            case 3:
                return { color: "bg-primary", object: <PcDisplay /> };
            case 4:
                return { color: "bg-danger", object: <BugFill /> };
            case 5:
                return { color: "bg-dark", object: <Search /> };
            case 6:
                return { color: "bg-primary ", object: <ListTask /> };
            default:
                return { color: "bg-primary", object: "" };
        }
    }

    return (
        <>
            <OverlayTrigger placement="right"
                overlay={
                    <Tooltip>
                        aaaaaaaaaa
                    </Tooltip>
                }
            >
                <Badge className={getType(props.taskType).color}> {getType(props.taskType).object} </Badge>
            </OverlayTrigger>
        </>);
}

export default TaskTypeDisplay;

问题演示：

针对Tooltip溢出页面导致的闪烁问题，可通过以下几种方式解决：

• 调整Tooltip的定位策略：给OverlayTrigger添加popperConfig配置，利用Popper.js的preventOverflow修饰符让Tooltip自动避开页面边界，避免溢出：

  <OverlayTrigger 
    placement="right"
    popperConfig={{
      modifiers: [
        {
          name: 'preventOverflow',
          options: {
            padding: 10 // 设置Tooltip与页面边缘的最小间距，单位px
          }
        }
      ]
    }}
    overlay={<Tooltip>aaaaaaaaaa</Tooltip>}
  >
    <Badge className={taskTypeInfo.color}> {taskTypeInfo.object} </Badge>
  </OverlayTrigger>
  

• 更换Tooltip的放置位置：如果当前right位置容易触发溢出，可尝试将placement属性改为left、top或bottom，选择更不容易超出视口的方向。

• 限制Tooltip的宽度并自动换行：通过自定义CSS限制Tooltip的最大宽度，避免内容过长导致溢出：

  .tooltip {
    max-width: 200px;
    overflow-wrap: break-word;
  }
  

• 优化组件性能：当前代码中getType(props.taskType)被重复调用两次，可在组件内提前计算一次结果，减少不必要的函数执行：

  function TaskTypeDisplay(props) {
    // 提前计算任务类型信息，避免重复调用
    const taskTypeInfo = getType(props.taskType);
  
    const getType = (taskType) => {
        let itaskType = parseInt(taskType)
        switch (itaskType) {
            // 原switch逻辑保持不变
        }
    }
  
    return (
        <>
            <OverlayTrigger ...>
                <Badge className={taskTypeInfo.color}> {taskTypeInfo.object} </Badge>
            </OverlayTrigger>
        </>);
  }
  

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