はじめに

特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。

TL;DR

• Tippy with Click Trigger, … Issue #437
• 対象ツールチップは _tippy にインスタンスを保持しているのでそれを利用
• ツールチップを非表示にしたいタイミングで、hide() を実行

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
5. まとめ
6. 参考文献

環境・条件

• Google Chrome バージョン: 80.0.3987.149（Official Build） （64 ビット）
• popper v1.16.1
• tippy v6.1.0

詳細

document.querySelector('.tippy-popper')._tippy で Tippy Instance にアクセス可能。

なのでツールチップを非表示にしたいタイミングで、hide() を実行すると良い。

1
2
3
4
5
6

closeTooltip() {
  setTimeout(() => {
    const tippyInstance = document.querySelector('.tippy-popper')._tippy;
    tippyInstance.hide();
  }, 1000);
},

詳しくは Tippy with Click Trigger, Unable to Hide Tippy via Function called From Anchor · Issue #437 · atomiks/tippyjs を参照。

まとめ

• Tippy with Click Trigger, … Issue #437
• 対象ツールチップは _tippy にインスタンスを保持しているのでそれを利用
• ツールチップを非表示にしたいタイミングで、hide() を実行

参考文献

• Tippy.js
• Tippy with Click Trigger, Unable to Hide Tippy via Function called From Anchor · Issue #437 · atomiks/tippyjs

関連記事

• ツールチップを簡単に表示できる Tippy.js の使い方
• Chart.js(vue-chartjs) でツールチップの表示内容を変更
• Vue.js で日本語変換での誤発火を抑止しつつ Enter キーで Submit
• Vue で子コンポーネントのメソッドをコールする
• apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更
• Chart.js で X軸, Y軸の値をカスタマイズ
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア