[JS]ツールチップの実装に迷った時に!依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js

シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。

サイトのキャプチャ

Tippy.js
Tippy.js -GitHub

Tippy.jsのデモ

Tippy.jsでは、さまざまなツールチップを簡単に実装できます。
デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。

まずは、デフォルトと表示方向の制御。

デモのアニメーション

デモページ

アローの形状も尖ったものから角丸・大・小など、さまざまなものが利用できます。ツールチップを表示する際のトリガーはホバー・フォーカス・クリック・タッチに対応しています。

デモのアニメーション

デモページ

アニメーションも豊富です。
下記のサイズを変更するスケールをはじめ、フェード・パースペクティブ・シフトなど、簡単に設定できます。

デモのアニメーション

デモページ

ツールチップを表示するタイミングの設定やテーマも設定できます。半透明やグラデーションは最近の流行ですね。

デモのアニメーション

デモページ

ツールチップに表示させる内容はHTMLにも対応しています。

デモのアニメーション

デモページ

Tippy.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

「tippy.all.min.js」には、CSSも含まれています。
単独で利用する場合は「tippy.standalone.js」を使用します。
スクリプトはCDNでも利用できます。

Step 2: HTML

ツールチップに表示させる内容をtitle属性に記述します。

Step 3: JavaScript

要素を指定し、スクリプトを実行します。

オプション

オプションではツールチップのさまざまなスタイルやアニメーションを簡単に利用できます。

sponsors

top of page

©2018 coliss