Display Vuetify tooltip on disabled button Display Vuetify tooltip on disabled button javascript javascript

Display Vuetify tooltip on disabled button


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>


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>