[SOLVED] Vuetify v-tooltip is not displaying when v-list is disabled

Vuetify v-tooltip is not displaying when v-list is disabled

I am having difficulty displaying a tooltip on disabled v-list. I want to disable a list when the isDisable property exists.

Sample code:

<v-list>
  <v-list-item
    v-for="(action, i) in actions"
    :key="`action-${i}`"
    :disabled="action.isDisable"
  >
    <v-tooltip>
      <template v-slot:activator="{ on, attrs }">
        <v-list-item-content v-bind="attrs" v-on="on">
          <v-list-item-title>{{ action.name }}</v-list-item-title>
        </v-list-item-content>
      </template>
      <span>Tooltip for disabled list.</span>
    </v-tooltip>
    <v-list-item-content v-else>
      <v-list-item-title>{{ action.name }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

Solution

When VListItem is disabled, pointer events are disabled via CSS:

.v-list-item--disabled {
  pointer-events: none;
}

So no mouseenter event and no VTooltip.

Simplest fix is to override it:

.v-list-item.v-list-item--disabled{
  pointer-events: auto;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-list>
            <v-list-item
              v-for="(action, i) in actions"
              :key="i"
              :disabled="action.isDisable"
            >
              <v-tooltip>
                <template v-slot:activator="{ on, attrs }">
{{log(on, attrs)}}
                  <v-list-item-content v-bind="attrs" v-on="on">
                    <v-list-item-title>{{ action.name }}</v-list-item-title>
                  </v-list-item-content>
                </template>
                <span>Tooltip for disabled list.</span>
              </v-tooltip>
              
            </v-list-item>
          </v-list>

        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      actions: [
        {name: 'action 1', isDisable: true},
        //{name: 'action 2', isDisable: false},
      ]
     }
  },
  methods: {
    log: (...x) => console.log(...x) 
  }
})

.v-list-item.v-list-item--disabled{
  pointer-events: auto;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>