世界を旅して暮らしたい放浪エンジニアブログ

TooltipやPopoverのシンプルなライブラリを探して見つけた「Tippy.js」

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

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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版を試してみたいと思います!!

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts