[ 目次 ]

• はじめに
• tippy.jsインストール
• 利用方法
• tippy.js読み込み
• サンプル
• Optionの設定方法
• 今回作成したPopover
• React版 - tippy.js-react
• Vue版 - vue-tippy

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、「Tipper.js」のご紹介になります。スクラッチでUIが構築されている案件で、TooltipやPopoverが利用したくなったのでシンプルなライブラリを探していました。そんな時に見つけたのが「Tipper.js」です。

Tipper.js

Tipper.jsは、「Popper.js」を利用して実装されています。

Popper.js

「Popper.js」を直接利用するのもいいかなと思いました。今後試してみたいと思います。
まずは、「Tipper.js」を試してみましょう。

tippy.jsインストール

CDNでも提供されていますが、npmのライブラリが用意されていますのでそちらを利用して今回はインストールしました。

■ npmを利用する場合

$ npm install tippy.js

■ yarnを利用する場合

$ yarn add tippy.js

利用方法

tippy.js読み込み

es6で以下のようにimportして利用することができます。

import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'

サンプル

<button data-tippy="Tooltip">Text</button>

tippy('button')

Optionの設定方法

■ jsでtippyの引数にOptionを渡す方法

tippy('button', {
  animation: 'scale',
  duration: 0,
  arrow: true,
  delay: [1000, 200],
})

■ htmlでdata属性を利用する方法

<button
  data-tippy="Tooltip"
  data-tippy-animation="scale"
  data-tippy-duration="0"
  data-tippy-arrow="true"
  data-tippy-delay="[800, 200]"
>
  Text
</button>

data属性でOptionが設定できるのはとても便利です。jsで利用箇所ごとにOption設定をする必要がないですね！

今回作成したPopover

業務として作成したものなのでキャプチャ画像のみになりますが、コメントにアイコンでリアクションする為のPopoverが作成したかったのでした。

tippyjsのサンプル

React版 - tippy.js-react

tippy.js-react!

Vue版 - vue-tippy

vue-tippy

今後、Vue版を試してみたいと思います！！