Tooltips visibility has changed with new slot syntax

[longrunningprocess]

Versions and Environment

Vuetify: 1.5.13
Vue: 2.6.10
Browsers: Chrome 73.0.3683.103
OS: Mac OS 10.14.4

Steps to reproduce

Supply a tooltip that is conditionally enabled. Attach that tooltip to a button that is disabled until a certain condition applies.

Expected Behavior

The tooltip should show on a disabled button and not show once the button is enabled

Actual Behavior

The tooltip actually never shows

Reproduction Link

https://codepen.io/anon/pen/eobORm

Other comments

This previously worked with Vue 2.5.22 and Vuetify 1.4.2: https://codepen.io/anon/pen/vMQqWP

[KaelWD]

Disabled buttons do not accept pointer events. The old example actually has an extra div around the button, which is easy enough to add yourself: https://codepen.io/anon/pen/EJGYBm

[longrunningprocess]

gotcha, that makes sense about the pointer events on disabled buttons, I guess this should never have worked? https://codepen.io/anon/pen/vMQqWP, specifically the v-btn here with no surrounding div:

<div class="align-center">
      <v-checkbox v-model="accepted" label="I accept"></v-checkbox>
      <v-tooltip bottom :disabled="accepted">
        <v-btn color="primary" slot="activator" :disabled="! accepted">Button</v-btn>
      
        <span>You must accept first</span>
      </v-tooltip>
    </div>

[KaelWD]

That works because the listener is on this element:

Which is also why it doesn't open if you hover above or below the text:

[longrunningprocess]

ok, and obviously it's better to ensure the tooltip triggers anywhere on the button not just the text. Would it be a reasonable request an example of a tooltip on a disabled button in the docs since I believe this would be a relatively common use case?

[rrmesquita]

Disabled buttons do not accept pointer events. The old example actually has an extra div around the button, which is easy enough to add yourself: https://codepen.io/anon/pen/EJGYBm

That workaround does not work on v-btn with absolute prop.

[lebesnec]

that's a LOT of markup just for a tooltip...

      <v-tooltip>
        <template v-slot:activator="{ on }">
          <span v-on="on">
            <v-btn :disabled="!canDelete()">
              Delete
            </v-btn>
          </span>
        </template>
        <span>Forbidden!</span>
      </v-tooltip>

[KaelWD]

Yep, the perils of flexibility. Follow #9610

[frederikheld]

Disabled buttons do not accept pointer events.

Sorry for adding to this old discussion, but I have a question about this design decision: why? It does not reflect the real world. Disabled buttons might not take click/tap events, but you can perfectly hover them, so the decision to not accept any kind of pointer event appears odd to me.