Arco Tooltip文字提示配置后无法显示是怎么回事？

Tr° 彩云提问于 2026-02-01 14:48:32 阅读 38

组件

我按照文档配置了Arco Design的Tooltip组件，设置了title和content属性，但鼠标hover时提示框完全不显示，控制台也没有报错。我尝试过把open设为true也没用，这是什么情况？

代码是这样写的：



  
    Hover我

检查了依赖版本是最新版，样式也正确引入了。其他组件都能正常工作，就这个提示框没反应，是不是需要额外配置什么属性？

我来解答赞 6 收藏

反馈

2 条解答

Top丶子璐 Lv1

代码给你，直接替换试试：

import { Tooltip } from 'arco-design';



export default () => (

  <Tooltip content="这是提示内容">

    <span style={{ display: 'inline-block', padding: '20px', background: '#f0f0f0' }}>Hover我</span>

  </Tooltip>

);

关键点：
1. content 属性才是放提示文本的
2. title 属性已经废弃了
3. 触发元素要能包裹住内容，span加个padding更容易触发hover
4. 最外层包裹元素加个背景色方便定位

我之前也踩过这个坑，升级到最新版后title属性直接失效，官方文档更新不及时。现在用content属性就正常了。

2026-02-03 09:09

西门欣怡 Lv1

你这个情况我遇到过，大概率是缺少 trigger 属性配置。默认情况下，Tooltip 需要明确指定触发方式，比如 hover 或 click，如果你没写这个属性，即使把 open 设为 true，也可能不会生效。

试试这样改你的代码：

<template>

  <a-tooltip :title="tooltipTitle" :content="tooltipContent" trigger="hover">

    <span>Hover我</span>

  </a-tooltip>

</template>



<script setup>

const tooltipTitle = '这是一个标题';

const tooltipContent = '这是提示内容';

</script>

另外提醒一下，如果你的内容是从外部动态传入的（比如后端接口），记得做一下转义处理，防止注入攻击。虽然 Arco Design 内部对内容做了基本的安全处理，但最好自己也确认下数据来源。

如果还是不行，可以试着加个 debugger 看看组件内部状态有没有正确更新，或者直接在 :open="true" 的情况下观察是否能强制显示出来。

2026-02-01 15:00