Display Vuetify tooltip on disabled button

题意:“在禁用的按钮上显示Vuetify工具提示”

问题背景:

I am having difficulty displaying a tooltip on a button that is disabled with Vuetify.

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

I've made sure the tooltip can be displayed when the button is enabled, this works as expected. I think that this question is related, but I'm not well-versed enough to know if this applies to a v-btn. I attempted to create a custom class and add that to the specific v-btn element but I did not have any luck.

“我已经确保当按钮启用时可以显示工具提示,这按预期工作。我认为**这个问题**是相关的,但我对是否适用于 `v-btn` 了解不够深入。我尝试创建一个自定义类并将其添加到特定的 `v-btn` 元素,但没有成功。”

Example HTML   “示例 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>

Example JavaScript                示例 js 代码

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

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

I'm expecting that the tooltip can be displayed when hovering over a disabled button. I'm hoping to use this to explain why the button is disabled.

“我期望当鼠标悬停在禁用按钮上时能够显示工具提示。我希望用它来解释按钮为何被禁用。”

问题解决:

Not sure if this is the absolute best way but I was able to get a tooltip on a disabled button by wrapping it in a div tag:

“我不确定这是否是最好的方法,但我通过将按钮包裹在一个 `div` 标签中,成功在禁用按钮上显示了工具提示:”

Codepen

<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

营赢盈英

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值