CODEWITHSUNDEEP
javascriptvuetify.js
ejohnso49
ejohnso49

Reputation: 1470

Display Vuetify tooltip on disabled button

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.

Example 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

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.

Upvotes: 44

Views: 25724

Answers (4)

Jaimerine
Jaimerine

Reputation: 301

Just building on codeflorist's answer to note you can still use the text prop instead of adding an extra span:

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

Upvotes: 0

codeflorist
codeflorist

Reputation: 533

building on Hexodus' answer, this would be the solution for 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>

Upvotes: 9

Hexodus
Hexodus

Reputation: 12927

As vuetify tooltip evolved to the slot syntax the right solution ist now this one:

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

Upvotes: 30

ejohnso49
ejohnso49

Reputation: 1470

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>

Upvotes: 75

Related Questions