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

Ads by Google

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 ツールチップの配置や動作をより詳細に制御可能。

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

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google