Arco Design 的 Tooltip 为什么在动态内容下不更新？

司马诗诗提问于 2026-03-17 12:25:22 阅读 59

组件

我在用 Arco Design 的 Tooltip 组件，传入的 content 是一个状态变量，但当我更新这个状态时，Tooltip 里的文字没变，还是显示旧的内容。明明 state 已经变了啊！

我试过加 key 强制刷新，也试过把 content 写成函数形式，都不行。代码大概是这样：

const [text, setText] = useState('初始提示');
// ...
return (
  <Tooltip content={text}>
    <Button onClick={() => setText('新提示内容')}>点我更新</Button>
  </Tooltip>
);

我来解答赞 14 收藏

反馈

2 条解答

极客淑瑶 Lv1

看起来 Arco Design 的 Tooltip 组件在处理动态内容更新时有点问题。我遇到过类似的情况，确实挺烦人的。

首先检查一下 Tooltip 组件的版本，有些老版本确实存在这个问题。如果升级组件不是选项，那可以试试这样：

把 Tooltip 包裹一层 React.memo 或者直接在外面再包一个状态管理组件。不过我更推荐直接改写 Tooltip 的使用方式，改成这样：

const [text, setText] = useState('初始提示');



return (

  <Tooltip 

    content={() => text} 

    getPopupContainer={triggerNode => triggerNode.parentNode} 

  >

    <Button onClick={() => setText('新提示内容')}>点我更新</Button>

  </Tooltip>

);

注意到我把 content 改成了函数返回值的形式，并且加了 getPopupContainer 属性来强制重新渲染。这种写法能确保 Tooltip 在内容变化时正确更新。

说实话这个写法有点绕，但至少能解决问题。等 Arco Design 后续优化吧，毕竟框架的问题有时候也只能曲线救国。

2026-03-27 21:10

端木悦轩 Lv1

这个问题是因为 Arco Design 的 Tooltip 内部对 content 做了缓存优化，默认不会响应 props 的变化。

两个解决方法：

一是加上 updateOnHover 属性：

<Tooltip content={text} updateOnHover>

  <Button onClick={() => setText('新提示内容')}>点我更新</Button>

</Tooltip>

这样每次鼠标悬停时会重新读取 content 的值。

二是用 key 强制刷新组件：

<Tooltip content={text} key={text}>

  <Button onClick={() => setText('新提示内容')}>点我更新</Button>

</Tooltip>

text 变化时 key 跟着变，Tooltip 就会重新挂载。

第一种方式适合hover显示的场景，第二种适合需要立即更新的场景，看你具体需求选一个。

2026-03-17 22:04