点击触发组件位移时Antd Tooltip卡顿问题求助

给你几个实用的解决办法：

1. 点击按钮时主动关闭Tooltip #

点击触发布局变化的瞬间，直接把Tooltip关掉，从根源避免它跟着布局乱跑。通过手动控制Tooltip的visible状态实现：

import { useState } from 'react';
import { Tooltip, Button, Icon } from 'antd';

const YourComponent = () => {
  const [tooltipVisible, setTooltipVisible] = useState(false);

  const openNotes = () => {
    // 先关闭Tooltip
    setTooltipVisible(false);
    // 执行你的业务逻辑，比如显示其他组件
    // ...
  };

  return (
    <Tooltip
      title="Some text"
      visible={tooltipVisible}
      onMouseEnter={() => setTooltipVisible(true)}
      onMouseLeave={() => setTooltipVisible(false)}
    >
      <button onClick={openNotes}>
        <Icon icon="notes" />
      </button>
    </Tooltip>
  );
};

2. 把Tooltip挂载到body容器 #

Antd默认会把Tooltip挂载到触发元素的父节点，布局变化时父节点位置变了，Tooltip定位就歪了。指定挂载到body，就能脱离局部布局的影响：

<Tooltip
  title="Some text"
  getPopupContainer={() => document.body}
>
  <button onClick={openNotes}>
    <Icon icon="notes" />
  </button>
</Tooltip>

如果挂载到body后Tooltip位置不对，可以调整placement属性或者自定义样式修正。

3. 布局变化后强制更新Tooltip位置 #

要是你需要Tooltip在点击后还保持显示，那就等布局变化完成后，手动触发Tooltip重新计算位置。利用Tooltip的ref调用内部的updatePosition方法：

import { useRef } from 'react';
import { Tooltip, Button, Icon } from 'antd';

const YourComponent = () => {
  const tooltipRef = useRef(null);

  const openNotes = () => {
    // 执行显示其他组件的逻辑
    // ...
    // 布局更新后，手动让Tooltip重新定位
    if (tooltipRef.current) {
      tooltipRef.current.updatePosition();
    }
  };

  return (
    <Tooltip
      title="Some text"
      ref={tooltipRef}
    >
      <button onClick={openNotes}>
        <Icon icon="notes" />
      </button>
    </Tooltip>
  );
};

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