Tippy.js - 軽量バニラジャバスクリプトツールチップライブラリ

ツールチップは、余分なコンテンツを少しだけ表示するのに役立ちます。それらはページ上のスペースを節約し、人々の注意を引く何かをアニメ化するための空間をあなたに与えます。.

これまではツールチップスクリプトを取り上げましたが、多くの開発者はカスタムライブラリを望んでいます。 jQueryを好む人もあれば、単純なvanilla JSが欲しい人もいます.

Tippyプラグインは後者のグループに最適です。 バニラJSコードで作業したい人.

Tippy.jsを使えば 完全に機能するツールチップライブラリ Popper.jsの上で動作しています。つまり、プラグインには小さな依存関係がありますが、jQueryライブラリよりも管理がはるかに簡単です。.

それで、Tippyの美しさは何ですか？それは作成するデフォルトのPopperスタイルに追加されます より動的なツールチップ 素晴らしい効果を.

フェード、スライド、ウィグル、カスタムデュレーション、コールバックメソッド、さらには自動回転ツールチップのような動的効果も追加できます。.

本当にこのプラグインは、明確に定義されたユーザビリティ機能であなたのツールチップをまったく新しいレベルに引き上げるでしょう。あなたは保つことができます 特定のページ要素を含む画面に固定されたツールチップ, あるいは、画面が小さくなりすぎると向きを変えます。.

また、タッチデバイスをサポートしているため、レスポンシブレイアウトに最適です。ツールチップHTMLは、最大限のアクセシビリティを実現するためにARIA標準を使用してラベル付けされています。私はこのプラグインについて言うのが悪いことは考えられません!

あなたがあなた自身のサイトでこれを試してみたいのであれば、GitHubからソースコードのコピーをダウンロードするだけです。これには、npmを使ったインストール方法の詳細とともに、メインのプラグインファイルが含まれています。.

デフォルトのTippy.jsスクリプトファイルにはPopper.jsが含まれているので、追加のライブラリをダウンロードする必要すらありません。必要なのは、デフォルトのJS / CSSファイルとツールチップを実行するためのWebページだけです。.

いくつかの例を詳しく調べたい場合は、ライブサンプルとコードスニペットを含むTippy.jsのホームページを見てください。コピーして再利用できます。.