【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方

今日ご紹介する［Tippy.js］は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。

特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。

サンプルは以下より。

Tippy.js : https://atomiks.github.io/tippyjs/

［Tippy.js］の使い方

まずは必要なファイルをダウンロードしてきます。

GitHub : https://github.com/atomiks/tippyjs

必要なのは［tippy.min.js］という名前のJavaScriptのファイル。

これをHTMLの適当な場所で読み込みます。

<script src="tippy.min.js"></script>

ツールチップを表示するための要素を作る

<button class="btn" title="Tooltip">Text</button>
<button class="btn" title="Another tooltip">Text</button>

初期化設定

最後に初期化を行います。
今回は「class="btn"」と名付けた要素を使うので、以下のように記述することになります。

<script>
tippy('.btn');
</script>

オプション設定

［Tippy.js］には多くのオプションが用意されています。
使用方法は「tippy();」に引数で指定します。

一例を挙げると次のとおり。

tippy('.btn', {
	placement: 'right',
	animation: 'scale',
	duration: 1000,
	arrow: true
})

オプション項目

かなり膨大ですが、オプション項目のリストも紹介します。

この他にも簡単に使えるコールバック関数なども用意されていて、ツールチップの機能として思いつく限りのことはなんでもできるという印象です。

上記のリストでも全ての機能を網羅しきれていないので、より詳しくは公式のガイドラインをご覧ください。

Tippy.js : https://atomiks.github.io/tippyjs/

Webページにツールチップを導入したいとき、このプラグインを第一候補として考えてみてはいかがでしょうか。