はじめに

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

TL;DR

続きを読む

はじめに

ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。

デモページ

本記事は tippy v5 系を利用しているので、最新 v6 系(2020/08/01 現在)と挙動や設定が異なる可能性あり

TL;DR

  • tippy(<target>, { content: 'my tooltip' }) でツールチップを設定
    • <target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OK
  • content に HTML も設定可能
    • tippy(<target>, { content: '<strong>my tooltip</strong>' })
    • tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
  • 既存テーマを利用する場合は CSS を読み込んで theme: 'light のように指定
続きを読む
  • page 1 of 1

r17n


Softwear Engineer


Fukuoka