Material ui Tooltip/Popper.js-动态添加工具提示标题后调整大小

我使用MaterialUI的

组件来显示动态获取的数据。我触发AJAX调用以获取

onOpen

回调中的数据。最初我显示的是一个加载微调器，但我将其替换为获取的数据

我的问题是，工具提示会随着新内容的增加而向下增长，以至于它会落在我的光标下，这使工具提示认为我再次将其悬停，从而触发另一次数据提取

我如何使用它的示例：

<Tooltip
    title={
        users ? (
            <Grid container direction="column" spacing={8}>
                {users.map(user => (
                    <Grid item key={user}>
                        {user}
                    </Grid>
                ))}
            </Grid>
        ) : <Loading />
    }
>
    <span>hover me</span>
</Tooltip>

(
{user}
))}
) : 
}
>
盘旋我

代码沙盒：

查看Popper.js实现，它们有一个名为

scheduleUpdate

的方法来触发工具提示的重画（调整位置和大小）

我的问题是，是否可以只使用Material UI工具提示组件包装器来实现这一点

---

提前谢谢

我也有同样的问题，在我更新了Popper的内容后，通过调用修复了它：

window.dispatchEvent(new Event("resize") ) 

---

我将工具提示组件（及其子组件）打包到自己的组件中，然后使用

useffect

更新一些

useState

变量，并将标题设置为

useState

变量。 这样，只有

值的更改才会触发远程API查询

看起来有点像：

constmyinput=（道具）=>{
const[icdInfo，setIcdInfo]=useState（{code:''，text:''}）；
const{id，value，placement，…rest}=props；
useffect（（）=>{
const fetchDescription=async（代码）=>{
返回wait wait myApi.get（`${apirl}/${code}`）；
};
获取描述（值）
。然后（（r）=>{
setIcdInfo（{code:icd_code，text:r.data.text | |'Unknown'}）；
})
.catch（（e）=>{
setIcdInfo（{代码：''，文本：'Error'}）；
});
return（）=>{}；
}，[value，icdInfo]）；
返回(
);
};