質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

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

xlr8
xlr8

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

2回答

0グッド

0クリップ

906閲覧

投稿2022/08/15 10:57

前提

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

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

実現したいこと

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

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

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

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

trigger: 'click'

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

該当のソースコード

Vue.js

1 <template> 2 <div class="~" 3 :style="#" 4 v-tooltip="{ 5 content: 'テスト文デス', 6 html: true, 7 trigger: 'click', 8 }" 9 > 10 <p>【サンプルタイトル】</p> 11 <p>サンプル日付</p> 12 <p>サンプルテキスト</p> 13 </div> 14 </template>

試したこと

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

Vue.js

1<button 2 v-tooltip="{ 3 content: 'Tooltip content here', 4 show: isOpen, 5 trigger: 'manual', 6 }" 7>A button</button>

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

v-tooltipについてのリンク

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

xlr8

2022/08/17 03:23

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

回答2

0

自己解決

【はじめに(初学者向けです)】

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

【解決までの道筋】

●前提として

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

●めっちゃググる

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

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

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

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

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

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

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

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

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

●初学者さんは、、、

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

投稿2022/08/17 03:55

xlr8

総合スコア11

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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

投稿2022/08/15 14:09

TakaseHiromichi

総合スコア110

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/08/16 02:29

こちらの回答が他のユーザーから「過去の低評価」という指摘を受けました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。