Vue3&Vuetify3でdisabledにしたボタンでTooltipを表示する

やりたいこと

disabled(グレーアウト）させたボタンにホバーした際に、なぜそのボタンが利用できないのか説明するtooltipを表示させたい

意外とvue3, vuetify3で実現させる方法がさっと見つからなかったのでメモ。

課題

以下のような単純なコードで実装すると、
tooltipもdisableになってしまい、表示されなくなってしまう

<v-tooltip location="bottom" :disabled="!isChecked">
  <template v-slot:activator="{ props }">
     <v-btn v-bind="props" :disabled="isChecked">
     送信
     </v-btn>
　　　　</template><span>まずチェックを入れてください</span>
</v-tooltip>

結論

ボタンを他のtagでラップする（divやspanなど）

<v-tooltip location="bottom" :disabled="!isChecked">
  <template v-slot:activator="{ props }">
      <span v-bind="props">
         <v-btn :disabled="isChecked">
         送信
         </v-btn></span> 
　　　　</template><span>まずチェックを入れてください</span>
</v-tooltip>

参考