【Vuetify】v-tooltipを用いて、クリックでツールチップを表示させたい

Question

前提

vueのバージョンはvue3
vuetifyのv-tooltipを使用します。

quitaや個人ブログなどをひたすら漁ったのですが、v-tooltipで指定できるオプション、trigger: 'click' に関する記事が見当たらなかったため、解決方法を知っている方がいましたら教えていただきたいです。

実現したいこと

v-tooltipを用いてdivタグ範囲内をホバーすることでツールチップを表示しているが、
タグ範内をクリックすることでツールチップを表示させるようにしたい。

trigger:~ をクリック指定にしてもホバーで表示されてしまうところで詰まっています。

発生している問題・エラーメッセージ

コード↓部分にて、ツールチップの表示条件をクリックにしているのに、
divタグ内をホバーするとツールチップが表示されてしまう。

trigger: 'click'

初学者なため動かない理由がコードミスなのか環境の問題なのかわからず、、
ただホバーでは表示され、content: ~の内容を書き換えることで表示する内容が変わるためv-tooltip自体は効いていると思います。

該当のソースコード

    <template>
      <div class="~"
        :style="#"
        v-tooltip="{
          content: 'テスト文デス',
          html: true,
          trigger: 'click',
        }"
      >
        <p>【サンプルタイトル】</p>
        <p>サンプル日付</p>
        <p>サンプルテキスト</p>
      </div>
    </template>

試したこと

• v-tooltipはディレクティブとコンポーネントのそれぞれで使うことができ、今回はディレクティブとして使用したいがコンポーネントとしても試してみた。→ホバーで表示される
• ドキュメントの使用例にある↓でも動かず。。

<button
  v-tooltip="{
    content: 'Tooltip content here',
    show: isOpen,
    trigger: 'manual',
  }"
>A button</button>

補足情報（FW/ツールのバージョンなど）

v-tooltipについてのリンク

• npm https://www.npmjs.com/package/v-tooltip#style-examples
• vuetify公式 https://vuetifyjs.com/en/components/tooltips/
• ブログ https://www.kabanoki.net/3429/

Comments

[xlr8]

自己解決いたしましたので、解決方法に記述いたします。
回答いただいた方もありがとうございました。

Answer 1

【はじめに（初学者向けです）】

回答いただいた方のリンク先を見て根本的なミスに気がつきました。
すごく初歩的なことなので恥ずかしいですが、私と同じ初学者の方がもしこの質問を閲覧した際の役に立てばと思い記載いたします。

【解決までの道筋】

●前提として

今回私が詰まっていたのは「ツールチップをホバーではなくクリックで表示させたい」という問題。
他の方が書いたコードを一部だけ書き換える、という感じです。

●めっちゃググる

Googleで「vue.js v-tooltip 使い方」などでググりまくる。

●同じ名前のライブラリがあることが念頭に無いために........

検索上位結果がVuetifyのv-tooltipに関するものばかりで、てっきり自分のプロジェクトで使われているv-tooltipはVuetifyのものであると勘違い。

●誤ったドキュメントを見て書き続ける男、、、

Vuetifyのドキュメントに従ってコードを書き換えても全く効かないため、ここで質問。

●必ずどのライブラリをインストールしているか確認を！！

回答で頂いたリンクを先と自分のプロジェクトフォルダのmain.jsやpackage.jsonの中身を参照すると、そもそもVuetifyのv-tooltipはライブラリとしてインストールしていないことが判明。
しかしv-tooltipはホバーでは表示されるので機能はしている、、、

●別の提供元のライブラリであることに気が付く

同じv-tooltipという名前だが、別の場所が提供しているライブラリだったことが判明。
（私の場合はFloating Vueで提供されたv-tooltipでした）

●初学者さんは、、、

ライブラリごとに機能や書き方のルールが違うため、他人の書いたコードを改修する際などは注意が必要です。
必ず提供元と見ているドキュメントが同じか確認しましょう。
私はこれで時間をすごく無駄にしましたが、良い勉強になったと思います。

Answer 2

参考記事では動作しているように見受けられますが、
お手元のソースと差分がないかご確認いただいた方がよいかと思います。

https://www.kabanoki.net/3429/
https://codepen.io/kabanoki/pen/pmvVMx