How to show tooltip on disabled v-tab?

[RBerga06]

Hi everyone,

I have a tab bar where the last tab is disabled and I wanted to add a tooltip to explain why to the user. I have tried wrapping the tab inside a <span></span> or a <div></div>, as explained in the relevant issue, but that workaround only seems to work for v-btn, not v-tab. The tooltip is correctly rendered on hover, but the tab does not grow like the other ones (I'm using <v-tabs grow>...</v-tabs>. Is there another workaround to achieve what I'm trying to do, or is it simply not possible?

Playground

Thank you for your time and your help (and sorry for my English, I'm not a native speaker).

P.S.: Would it be possible to allow disabled items to receive hover events at some point in the future (or add a new opt-in prop just for this, disabled-allow-hover or something along those lines)? Reading the previous discussion linked above, I feel like this is a common enough use-case that many users would benefit from it.

[J-Sek]

demo

<v-tab
  value="three"
  disabled
  class="pointer-events-auto"
  v-tooltip:bottom="'Out of order'"
  text="Item Three"
/>

The trick is just a class to restore pointer-events.
Works with <v-tooltip>...</v-tooltip>, assuming you bind events correctly v-bind="props" not v-bind="{props}".

[RBerga06]

Thank you!