题意:“在禁用的按钮上显示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` 标签中,成功在禁用按钮上显示了工具提示:”
<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>