[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js
Post on:2018年3月1日
sponsors
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。
Tippy.jsのデモ
Tippy.jsでは、さまざまなツールチップを簡単に実装できます。
デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。
まずは、デフォルトと表示方向の制御。
アローの形状も尖ったものから角丸・大・小など、さまざまなものが利用できます。ツールチップを表示する際のトリガーはホバー・フォーカス・クリック・タッチに対応しています。
アニメーションも豊富です。
下記のサイズを変更するスケールをはじめ、フェード・パースペクティブ・シフトなど、簡単に設定できます。
ツールチップを表示するタイミングの設定やテーマも設定できます。半透明やグラデーションは最近の流行ですね。
ツールチップに表示させる内容はHTMLにも対応しています。
Tippy.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <script src="tippy.all.min.js"></script> </head> |
「tippy.all.min.js」には、CSSも含まれています。
単独で利用する場合は「tippy.standalone.js」を使用します。
スクリプトはCDNでも利用できます。
|
1 2 3 4 |
<head> ... <script src="https://unpkg.com/tippy.js/dist/tippy.all.min.js"></script> </head> |
Step 2: HTML
ツールチップに表示させる内容をtitle属性に記述します。
|
1 2 |
<button title="Tooltip">Text</button> <button title="Another tooltip">Text</button> |
Step 3: JavaScript
要素を指定し、スクリプトを実行します。
|
1 2 3 |
<script> tippy('button') </script> |
オプション
オプションではツールチップのさまざまなスタイルやアニメーションを簡単に利用できます。
|
1 2 3 4 5 6 |
tippy('.btn', { placement: 'right', animation: 'scale', duration: 1000, arrow: true }) |
sponsors
