v-tooltip内にあるclickイベントが発火しない

やりたいこと

v-tooltipで、

• マウスオーバーで表示/非表示
• v-tooltipの中に文字列＋ボタンを置いて、ボタンを押下すると処理が走るようする

以下のイメージです。

<v-tooltip
  top
  close-delay="500ms"
>
  <template #activator="{ on, attrs }">
    <img
      :src="url"
      :alt="description"
      v-on="on"
      v-bind="attrs"
    >
  </template>
  <div>
    <span>
      タイトル<br>
    </span>
    <v-btn @click="$emit('run', id)">
      処理実行！
    </v-btn>
  </div>
</v-tooltip>

close-delayは、マウスオーバー外れた後に消える時間を伸ばしてボタンを押せるようにしています。

ここで問題なのが、v-tooltipの中に置いたクリックイベントが発火しないということ。
じゃあ、aタグは？とやってみるも、リンクになっているのに押せず・・・。

原因

v-tooltip__contentに、cursor-event: none;がついていました。
このせいで、クリックイベントもaタグのリンクも効かなくなっていました。

解決策

原因になっているcssを上書きしてあげればOKでした。

.v-tooltip__content {
  pointer-events: initial;
}

このせいで数時間はまりました・・・。