Popper.jsでページ上の吹き出しを作成する

誰もが知っている ツールチップ そしてあなたがそれらを作るのを助けるために無料のリソースがたくさんあります。しかしながら, カスタムメッセージバブル または “ポッパー” また非常に便利です.

彼ら ホバーイベントに限定されない, そのため、それらはページに一貫して表示され、他のユーザーの動作を回避することができます。.

これらを作成しようとしているなら 吹き出しポッパー あなたのサイトに Popper.js 最良の選択です。これは、公式のjs.org Webサイトでホストされている無料のオープンソースプラグインです。.

あなたは複雑なインターフェースを持つ多くのウェブサイトでこれらのバブルのヒントを見つけるでしょう。時々彼らは申し出ます 簡単なヒント, ウォークスルー, そして オンボーディングアドバイス インターフェースの初心者向け.

Popper.jsを使うと、ユーザーがツールチップを作成するためだけにホバーするのを待つ必要はありません。代わりに、ポッパーを強制的に どこにでも現れる, 任意のサイズ, 任意の色, 動的ポジショニング.

Popper.jsデモページをチェックして、私が何を意味するのかを確かめてください。それは付属しています 豊富な位置決め機能 画面の位置に基づいてポッパーの位置を自動的に反転させることができます。.

ユーザーがページを下にスクロールすると、ポッパーの泡が消える可能性があります。このプラグインを使えば、 それを視野に戻す ユーザーのスクロール方向に応じて、上下に反転します。.

境界線、矢印の位置、ツールチップの色などを完全に制御できます。このプラグインは言うまでもありませんが豪華です 完全に拡張可能 自分の機能をミックスに追加したい場合.

チェックアウトしたい場合は、GitHubですべてのソースコードを無料で入手できます。.

はじめに、を見てください。 ドキュメントページ 完全なガイドのために。これはどのスクリプトが必要か、カスタムポッパーの設定方法、そして異なるビューポートオプションの設定方法を教えてくれます。もっとも、最良のリソースは メインのPopper.jsページ, 豊富なデモと豊富なコードサンプル.

開発についてもっと知りたいのなら、作成者Federico Zivoloによって書かれたこのブログ記事をチェックしてください。.