たった3行コピペするだけで可愛いポップアップが表示できる tippy.js

HTMLでサイトを作ってると、ポップアップ表示で説明を入れたい時がある。
とりあえず標準のalert('hello')とか使うけど、見た目がダサすぎる。
作っているのがサンプルアプリだとしても許せないレベル。

で、イイ感じのポップアップをalertメソッドくらい簡単に表示できるライブラリないかなぁと思って調べたら"tippy.js"を見つけました。

f:id:naosim:20200523211309p:plain
こんなポップアップがたった3行のコピペで表示できる。
デザインも良くて、カスタマイズ性も高く、ドキュメントも充実してて使いやすいライブラリだったので紹介します。

tippy.js

f:id:naosim:20200524065810p:plain

公式サイト: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library
github: atomiks/tippyjs: Tooltip, popover, dropdown, and menu library

Webの完全なツールチップ、ポップオーバー、ドロップダウン、およびメニューソリューション

とりあえずアイコンが可愛い。

とりあえず表示するなら3行コピペでOK

クッソ簡単。 例えば

<div id="myContent">hello</div>

という部分にマウスオーバーしたときにポップアップを表示をしたいなら
まずCDNからのJSの読み込みを2行コピペ。

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

jsに実装をコピペ。

tippy('#myContent', {content: "I'm a Tippy tooltip!"});

はい。完成。
指定したのはdiv要素へのセレクターと表示するテキストのみ。
↓動作確認用のページで"hello"にカーソルを乗せてみてください。

See the Pen tippy.js sample by なおしむ (@naosim) on CodePen.

簡単すぎる!
ちなみにjquery等へのライブラリ依存もないです。ほんとに上記のコピペだけで完結。

カスタマイズも豊富

このライブラリ、簡単に使えるだけでなくカスタマイズもめちゃくちゃ豊富なんです。
いくつか利用頻度の高そうなものを紹介します。

クリックで表示する

ポップアップ表示はデフォルトはマウスオーバーですが、クリック時に表示できるようにします。 先ほどのtippyメソッドにtriggerパラメータを追加するだけ。

tippy('#myContent', {content: "I'm a Tippy tooltip!", trigger: 'click'}); // triggerを追加

このようにtippyのカスタマイズは基本的にパラメータを追加するだけ。簡単。

ポップアップを出す位置を変える

デフォルトは上側にポップアップが表示されますが、これも変更可能です。 方法はplacementを追加するだけ。例えば右側に表示したいならこう。

tippy('#myContent', {content: "I'm a Tippy tooltip!", placement: 'right'}); // placementを追加

設定値は他にもたくさんあります。いろいろ使ってみると楽しい。
- top - top-start - top-end - right - right-start - right-end - bottom - bottom-start - bottom-end - left - left-start - left-end - auto - auto-start - auto-end

ポップアップにHTMLを表示する

デフォルトではポップアップのテキストに改行を入れられません。理由はテキストにHTMLが使えず<BR>タグが使えないから。これもパラメータ追加で解決できます。痒いところに手が届いててすごい。

tippy('#myContent', {content: "I'm a Tippy tooltip!", allowHTML: true}); // allowHTMLを追加

AJAXを使うなどマニアックなカスタマイズも

公式サイトを眺めていたら、ポップアップ時にAJAXで画像を読み込んで表示するサンプルが出てきた。
そんなことまでできるのか。。
すごい。。
AJAX | Tippy.js

まとめ

コードを3行コピペだけでポップアップ表示ができるtippy.jsを紹介しました。
簡単で便利すぎるライブラリなので、知っておいて損はないですね。