我在使用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
}
}
})
当鼠标悬停在禁用按钮上时,我希望能显示工具提示。我希望可以通过这种方式解释为什么按钮被禁用。