Display Vuetify tooltip on disabled button

Question

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

Answer 1

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>

Answer 2

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>