はじめに
特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
TL;DR
- Tippy with Click Trigger, … Issue #437
- 対象ツールチップは
_tippyにインスタンスを保持しているのでそれを利用 - ツールチップを非表示にしたいタイミングで、
hide()を実行
特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
_tippy にインスタンスを保持しているのでそれを利用hide() を実行ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。
本記事は tippy v5 系を利用しているので、最新 v6 系(2020/08/01 現在)と挙動や設定が異なる可能性あり
tippy(<target>, { content: 'my tooltip' }) でツールチップを設定<target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OKcontent に HTML も設定可能tippy(<target>, { content: '<strong>my tooltip</strong>' })tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })theme: 'light のように指定