Question

我正在使用Material-UI的<Tooltip />组件来显示动态获取的数据。我触发了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>

代码和框：https://codesandbox.io/s/yq5j9qky7v

看看Popper.js的实现，他们有一个名为scheduleUpdate的方法来触发工具提示的重绘（调整位置和大小）https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#popperscheduleupdate

我的问题是，是否可以仅使用Material-UI Tooltip组件包装器来使用它？

谢谢！

Answer 1

我遇到了同样的问题，在我更新了Popper的内容后通过调用来解决此问题：

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

Answer 2

我将工具提示组件（及其子组件）打包在其自己的组件中，然后使用useEffect更新一些useState变量并将标题设置为useState变量。这样，只有value中的更改会触发远程API查询。

看起来有点像：

const MyInput = (props) => {
  const [icdInfo, setIcdInfo] = useState({code: '', text: ''});
  const {id, value, placement, ...rest} = props;
  useEffect(() => {
    const fetchDescription = async (code) => {
        return await myApi.get(`${apiUrl}/${code}`);
    };
    fetchDescription(value)
        .then((r) => {
          setIcdInfo({code: icd_code, text: r.data.text || 'Unknown'});
        })
        .catch((e) => {
          setIcdInfo({code: '', text: 'Error'});
        });
    return () => {};
  }, [value, icdInfo]);
  return (
    <Tooltip title={icdInfo.text} >
      <Child {...rest} />
    </Tooltip>
  );
};

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

2 个答案: