Question

我有以下模板（出于此问题的目的，无需在此处放置模板）：

<template>
    <div>
        <v-card :color="variant">
            <v-card-actions>
                <v-tooltip top>
                    <v-btn icon slot="activator" @click="openConsole">
                        <v-icon>computer</v-icon>
                    </v-btn>
                    <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>
    </div>
</template>

我希望每当鼠标悬停在“控制台图标”按钮上时都显示工具提示。

我在这里想念什么？

v-card-actions中的图标工具提示是否存在问题？我查看了此引用https://codepen.io/anon/pen/MOLjVz?editors=1010，但无法在我的代码中应用

Answer 1

也许您正在使用语法不同的新vuetify版本？试试这个：

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on" @click="openConsole" icon>
      <v-icon>computer</v-icon>
    </v-btn>
  </template>
  <span>Console</span>
</v-tooltip>

查看Vuetify docs了解更多详情

Answer 2

自己找到解决方案：

需要在根div组件上添加data-app属性：


        <div data-app>
              <v-card :color="variant">
                <v-card-actions>
                  <v-tooltip top>
                    <template v-slot:activator="{ on }">
                      <v-btn v-on="on" @click="openConsole" icon>
                        <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>
    </div>

Vuetify工具提示现在显示在卡组件内部的按钮内

2 个答案: