Naive UI的Tooltip内容怎么一直不显示出来？

慕容秋香提问于 2026-02-04 14:59:26 阅读 42

组件

我在按钮上用了Naive UI的Tooltip组件，但提示内容完全没反应。按官方文档写的，trigger也试过’mouseenter’和’click’都不行。

这是我的代码片段：


<template>
  <n-tooltip trigger="click" placement="bottom">
    <n-button>点击显示提示</n-button>
    <template #default>
      这里应该是提示内容
    </template>
  </n-tooltip>
</template>

有没有可能哪里写反了？是不是内容应该放在button里面？或者需要额外设置visible属性？

Naive UI

我来解答赞 7 收藏

反馈

2 条解答

开发者综敏 Lv1

你把内容插槽写错了，#default 应该是提示内容的插槽，按钮应该作为触发元素放在里面。改成这样就行：

<template>

  <n-tooltip trigger="click" placement="bottom">

    <template #trigger>

      <n-button>点击显示提示</n-button>

    </template>

    这里应该是提示内容

  </n-tooltip>

</template>

或者更简单的写法，直接把按钮放外面当触发器也行：

<template>

  <n-tooltip trigger="click" placement="bottom">

    <n-button>点击显示提示</n-button>

    <span>这里应该是提示内容</span>

  </n-tooltip>

</template>

试试看，第二个写法更常见。

2026-02-12 11:11

南宫利利 Lv1

你这个写法确实有问题，tooltip 内容应该包裹触发元素。改一下结构就行：

<template>

  <n-tooltip trigger="click" placement="bottom">

    <template #default>

      这里应该是提示内容

    </template>

    <n-button>点击显示提示</n-button>

  </n-tooltip>

</template>

naive-ui 的 Tooltip 组件需要把内容插槽写在触发元素前面，这样点击按钮时才能正常显示提示。我之前也踩过这个坑，结构套反了完全没提示。

2026-02-04 15:01