はじめに
特殊な要件だが、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
のように指定