【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
})

オプション項目

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

オプション	初期値	指定できる選択肢	説明
`placement`	`'top'`	`'top'` `'bottom'` `'left'` `'right'`	ツールチップを表示する位置。語尾に `-start` または `-end` を追加して位置を調整する事も可能。
`trigger`	`'mouseenter focus'`	`'mouseenter'` `'focus'` `'click'` `'manual'` `{custom}`	ツールチップを表示するイベントの種類。
`dynamicTitle`	`false`	`Boolean`	参照要素のtitle属性が変更されるたびに、ツールチップが自動的に更新される。
`interactive`	`false`	`Boolean`	ツールチップを閉じる動作を制御する。
`interactiveBorder`	`2`	`Number` (px)	ツールチップを囲む不可視の枠線のサイズを指定する。`mouseenter`で起動したツールチップのみに適用可能。
`animation`	`'shift-away'`	`'shift-away'` `'shift-toward'` `'perspective'` `'fade'` `'scale'`	アニメーションのタイプ。
`animateFill`	`true`	`Boolean`	Adds a material design-esque filling animation. This is disabled if you have `arrow` set to `true`.
`arrow`	`false`	`Boolean`	参照要素を指す矢印を追加する。これを `true` に指定すると `animateFill` が無効になる。
`arrowType`	`'sharp'`	`'sharp'` `'round'`	使用する矢印のタイプを指定。SharpはCSSの三角形ですが、RoundはカスタムSVGシェイプです。
`arrowTransform`	`''`	Transform CSS	`'scaleX(1.5)'` や `'translateY(5px)'` などと指定して、矢印の比率や位置を調整可能。
`delay`	`0`	`Number` \| `Array` (milliseconds)	ツールチップの表示・非表示を遅延させる時間を指定。例：`[300, 100]`
`flip`	`true`	`Boolean`	ツールチップを反転しながら表示する。
`maxWidth`	`''`	`String` with unit	ツールチップの最大幅を指定。「px」「rem」等で指定可能。
`duration`	`[350, 300]`	`Number` \| `Array` (milliseconds)	表示または非表示する際のアニメーションに要する時間。配列で `[300, 100]` と指定する。
`html`	`false`	`false` \| template `id` \| `Element`	ツールチップにHTMLを追加。
`size`	`'regular'`	`'small'` `'regular'` `'large'`	ツールチップの大きさを指定する。
`distance`	`10`	`Number` (px)	ツールチップを参照要素からどのくらい離すかを指定する。
`theme`	`'dark'`	`'dark'`	ツールチップのデザインをCSSでカスタマイズする。
`hideOnClick`	`true`	`true` `false` `'persistent'`	クリックでツールチップを非表示にする。
`multiple`	`false`	`Boolean`	複数のツールチップを開く。（クリックトリガー選択時のみ）
`followCursor`	`false`	`Boolean`	マウスカーソルの動きに追従するかどうかを指定。
`sticky`	`false`	`Boolean`	親要素がアニメーション化または移動する場合などに、ツールチップを固定する。
`zIndex`	`9999`	`Number`	CSSの「z-index」の値を指定して重なり順を変える。
`performance`	`false`	`Boolean`	`data-tippy-*` オプションを無効にして、初期インスタンス化時間を短縮する。
`onShow`	-	`Function`	ツールチップが表示されたときに呼び出されるコールバック関数
`onShown`	-	`Function`	ツールチップが表示されるときに呼び出されるコールバック関数。
`onHide`	-	`Function`	ツールチップが非表示になったときに呼び出されるコールバック関数。
`onHidden`	-	`Function`	ツールチップが表示された後に呼び出されるコールバック関数。
`popperOptions`	`{}`	`Object`	ツールチップの配置や動作をより詳細に制御可能。

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

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