Google今日ご紹介する[Tippy.js]は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。https://atomiks.github.io/tippyjs/[Tippy.js]の使い方まずは必要なファイルをダウンロードしてきます。https://github.com/atomiks/tippyjs必要なのは[tippy.min.js]という名前のJavaScriptのファイル。これをHTMLの適当な場所で読み込みます。最後に初期化を行います。今回は「class="btn"」と名付けた要素を使うので、以下のように記述することになります。<script>tippy('.btn');</script>オプション設定[Tippy.js]には多くのオプションが用意されています。使用方法は「tippy();」に引数で指定します。一例を挙げると次のとおり。true})オプション項目かなり膨大ですが、オプション項目のリストも紹介します。ツールチップを表示する位置。追加して位置を調整する事も可能。ツールチップを表示するイベントの種類。参照要素のtitle属性が変更されるたびに、ツールチップが自動的に更新される。ツールチップを閉じる動作を制御する。ツールチップを囲む不可視の枠線のサイズを指定する。mouseenterで起動したツールチップのみに適用可能。アニメーションのタイプ。参照要素を指す矢印を追加する。使用する矢印のタイプを指定。SharpはCSSの三角形ですが、RoundはカスタムSVGシェイプです。指定して、矢印の比率や位置を調整可能。ツールチップの表示・非表示を遅延させる時間を指定。ツールチップを反転しながら表示する。ツールチップの最大幅を指定。「px」「rem」等で指定可能。表示または非表示する際のアニメーションに要する時間。ツールチップにHTMLを追加。ツールチップの大きさを指定する。ツールチップを参照要素からどのくらい離すかを指定する。ツールチップのデザインをCSSでカスタマイズする。クリックでツールチップを非表示にする。複数のツールチップを開く。マウスカーソルの動きに追従するかどうかを指定。親要素がアニメーション化または移動する場合などに、ツールチップを固定する。CSSの「z-index」の値を指定して重なり順を変える。オプションを無効にして、初期インスタンス化時間を短縮する。ツールチップが表示されるときに呼び出されるコールバック関数。ツールチップが非表示になったときに呼び出されるコールバック関数。ツールチップが表示された後に呼び出されるコールバック関数。ツールチップの配置や動作をより詳細に制御可能。この他にも簡単に使えるコールバック関数なども用意されていて、ツールチップの機能として思いつく限りのことはなんでもできるという印象です。上記のリストでも全ての機能を網羅しきれていないので、より詳しくは公式のガイドラインをご覧ください。https://atomiks.github.io/tippyjs/Webページにツールチップを導入したいとき、このプラグインを第一候補として考えてみてはいかがでしょうか。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。【最新バージョン7.3対応】jQuery無しで動く神スライダー[Swiper]が便利すぎて。【JavaScript】デジタル時計を表示する方法。【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト[Fort.js]が便利です。