在禁用按钮上显示 Vuetify 工具提示

Question

我在使用 Vuetify 禁用的按钮上显示工具提示时遇到困难。

我已确保启用按钮时可以显示工具提示，这按预期工作。我认为这个问题是相关的，但我不够精通，不知道这是否适用于

v-btn

。我尝试创建一个自定义类并将其添加到特定的

v-btn

元素，但我没有任何运气。

HTML 示例

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="text-xs-center">
      <v-layout
        flex
        justify-space-between
        row
        wrap
      >
        <v-flex xs12>
          <v-btn @click="show = !show">toggle</v-btn>
        </v-flex>

        <v-flex xs12 class="mt-5">
          <v-tooltip v-model="show" top>
            <template v-slot:activator="{ on }">
              <v-btn disabled icon v-on="on">
                <v-icon color="grey lighten-1">shopping_cart</v-icon>
              </v-btn>
            </template>
            <span>Programmatic tooltip</span>
          </v-tooltip>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

JavaScript 示例

new Vue({
  el: '#app',
  data () {
    return {
      show: false
    }
  }
})

https://codepen.io/anon/pen/ZNqpOW?editors=1010

我希望将鼠标悬停在禁用按钮上时可以显示工具提示。我希望用它来解释为什么按钮被禁用。

Answer 1

不确定这是否是绝对最好的方法，但我可以通过将其包装在

div

标签中来获得禁用按钮上的工具提示：

代码笔

<v-tooltip v-model="show" top>
  <template v-slot:activator="{ on }">
    <div v-on="on">
      <v-btn disabled icon>
        <v-icon color="grey lighten-1">shopping_cart</v-icon>
      </v-btn>
    </div>
  </template>
  <span>Programmatic tooltip</span>
</v-tooltip>

Answer 2

随着 vuetify 工具提示演变为插槽语法，现在正确的解决方案是这个：

<v-tooltip bottom :disabled="valid">
    <template v-slot:activator="{ on }">
    <div v-on="on" class="d-inline-block">
        <v-btn color="primary" :disabled="!valid">Button</v-btn>
    </div>
    </template>
    <span>You must accept first</span>
</v-tooltip>

Answer 3

基于 Hexodus 的答案，这将是 Vuetify 3 的解决方案：

    <v-tooltip bottom :disabled="valid">
        <template v-slot:activator="{ props }">
            <div v-bind="props" class="d-inline-block">
                <v-btn color="primary" :disabled="!valid">Button</v-btn>
            </div>
        </template>
        <span>You must accept first</span>
    </v-tooltip>

Answer 4

仅以 codeflorist 的答案为基础，请注意，您仍然可以使用 text 属性，而不是添加额外的跨度：

<v-tooltip bottom :disabled="valid" text="You must accept first">
  <template v-slot:activator="{ props }">
    <div v-bind="props" class="d-inline-block">
      <v-btn color="primary" :disabled="!valid">Button</v-btn>
    </div>
  </template>
</v-tooltip>