Vuetify卡片内按钮Tooltip不显示问题求助

安全阿岳

2026-5-14

Vuetify v-card-actions内Tooltip不显示的解决方案

我帮你排查了一下，问题出在Tooltip的activator语法上，咱们一步步来解决：

1. 核心问题：过时的slot语法

你当前用的slot="activator"是Vuetify 1.x的旧写法，在Vuetify 2.x及以上版本中，已经改用v-slot语法来传递activator的事件和属性，这就是Tooltip无法触发悬停显示的根本原因。

2. 修正后的代码实现

把Tooltip的activator部分改成v-slot绑定，同时将Tooltip提供的事件和属性绑定到按钮上，就能正常监听鼠标悬停事件了。修改后的代码片段如下：

<v-card :color="variant">
  <v-card-actions>
    <v-tooltip top>
      <!-- 使用v-slot接收Tooltip提供的事件和属性 -->
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon v-bind="attrs" v-on="on" @click="openConsole">
          <v-icon>computer</v-icon>
        </v-btn>
      </template>
      <span>Console</span>
    </v-tooltip>

    <!-- 其他按钮保持原有逻辑即可 -->
    <v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
    <v-btn icon @click="show = !show">
      <v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
    </v-btn>
  </v-card-actions>
</v-card>

3. 关键细节说明

v-slot:activator="{ on, attrs }"：从Tooltip组件中解构出on（包含悬停等触发事件）和attrs（包含必要的HTML属性）。
v-bind="attrs"：把Tooltip需要的属性批量绑定到按钮上。
v-on="on"：把Tooltip的事件监听批量绑定到按钮上，确保鼠标悬停时能正确触发Tooltip显示。