react-bootstrap 工具提示在第一次渲染时定位错误答案

【问题标题】：react-bootsrap tooltips positions itself wrong on first renderreact-bootstrap 工具提示在第一次渲染时定位错误
【发布时间】：2022-10-15 18:41:09
【问题描述】：

嗨，我在我的项目中使用 bootstrap 5.2.1 和 react-bootsrap 2.5.0。我正在尝试使用带有组件的工具提示。但是，当我将鼠标悬停在徽章工具提示上时，页面会溢出并且滚动条会暂时激活。然后它会自行修复。但这会导致页面闪烁。我错过了什么吗？这是组件

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
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;

“错误的定位”是我的猜测。我不知道。

【问题讨论】：

标签： react-bootstrap bootstrap-5 popper.js

【解决方案1】：

当我在每一步中使用调试模式并停止执行时，我意识到工具提示的“箭头”正在屏幕的最右侧呈现并导致了这种情况。

这是工具提示箭头的原始 css

.tooltip-arrow::before {
right: -1px;
}

我将其更改为：

.tooltip-arrow::before {
right: 0px !important; 
}

它解决了滚动条问题，没有其他任何改变（据我所知）

【讨论】：