マウスを載せた際などに表示されるポップオーバー。ユーザの好きなタイミングで(多くは困った時に)表示してくれるので便利なツールです。しかし画面の端などで表示する場合、画面外に隠れてしまったりします。 そんな困った、を解決してくれるのがPopper.jsです。ポップオーバーだけにこだわったライブラリです。

Popper.jsの使い方

上下左右、好きな場所に表示できます。

標準では左側に表示されています。

DOMの位置によってポップオーバーの表示位置が自動で変わります。

スクロール追従も可能です。

さらに細かいところでポップオーバーの頭、またはお尻の位置をDOMに合わせられます。

Popper.jsはポップオーバーに対する並々ならぬ情熱を感じさせるライブラリです。レスポンシブなサイトにも対応していたり、ReactやAngularなどとの組み合わせも想定されています。プラグインによる拡張も可能です。

Popper.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Popper.js FezVrasta/popper.js: A kickass library to manage your poppers