Menu
I am having difficulty displaying a tooltip on a button that is disabled with 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.
<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> 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.
247
By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps: Add a disabled element like the button element into a div whose display style is set to inline-block . Set the pointer event as none for the disabled element (button) through CSS.
To create a tooltip using the component approach, we can simply create a button and put the ID in the target attribute. In the code above, we created a button called b-button and gave it a specific ID, tooltip-target-1 .
$attrs: Stores the attributes setted in the parent component, you can reuse them in a inner component.
Like many other components in Vuetify, the v-tooltip component comes with the color prop for customizing the color of the tooltip. Using v-model on a v-tooltip allows us to set up a two-way binding between the visibility of the tooltip and a variable. For example, in the code below, we've created a button and a tooltip below it.
It means users cannot focus, hover, or click them to trigger a tooltip (or popover) or any functions. Use the following approaches to enable a tooltip on disabled-buttons. By default tooltips is initialized by selecting the specified element and call the tooltip () method using jQuery.
You can also programmatically control the display of tooltips through a v-model. When activated, tooltips display a text label identifying an element, such as a description of its function. Tooltips can wrap any element. A tooltip can be aligned to any of the four sides of the activator element.
It means users cannot focus, hover, or click them to trigger a tooltip (or popover) or any functions. Use the following approaches to enable a tooltip on disabled-buttons.
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:
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With