Bind tooltip and dialog on the same button?

[antoinegoutagny]

Hi. I'm trying to bind both a tooltip and a dialog on the same button, but that does not seem to work. How can I bind on/attrs on activator slots for both component on the same button? Is that even possible?

I've tried nesting the tooltip in the dialog and the other way around. Each time, only the nested component works - I guess because the parent's on & attrs attributes are overriden by the nested one.

<v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">

          <v-dialog max-width="600" v-model="showQRCode">
            <template v-slot:activator="{on, attrs}">
              <v-btn
                text
                v-bind="attrs"
                v-on="on"
                color="primary"
                class="d-none d-sm-block"
              >
                <v-icon>qr_code</v-icon>
              </v-btn>
            </template>
            <v-card class="p-4 pb-1">
              <v-card-title class="justify-center">
                Scan this code to view the widget on your mobile device
              </v-card-title>
              <div id="qrcode" class="mt-4">
              </div>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text
                color="primary"
                @click="showQRCode = false"
                >
                Close
              </v-btn>

            </v-card-actions>
          </v-card>

        </v-dialog>
        </template>
        <span>Scan the QR code and test on your mobile device.</span>

    </v-tooltip>

[jacekkarczmarczyk]

https://vuetifyjs.com/en/components/menus/#activator-and-tooltip