Popper.js – Poppers in Web-Applikationen erstellen

Das Erstellen und die Verwaltung von Poppers kann eine ziemlich nervenaufreibende Angelegenheit sein. Um Developern die kostbaren Nerven zu schonen, hat Federico Zivolo die Library Popper.js entwickelt. Damit soll das Positionieren von Tooltips, Pop-Overn usw. mit nur einer einzigen Zeile Code möglich sein.

Warum Popper.js?

Im Prinzip ist die Aufgabe von Popper.js simpel: Das Tool sorgt dafür, dass der zuvor ausgewählte Popper in der Nähe des definierten Referenzelements bleibt – zumindest, wenn der Entwickler das so wünscht. Dennoch ist Popper.js aber nicht nur eine weitere Tooltip-Library in der langen Reihe von JavaScript-Bibliotheken, sondern ist von Grund auf modular und komplett anpassbar. Zudem unterstützt die JavaScript-Library ein Plugin-System, das zum Modifizieren von Poppers genutzt werden kann. Beispielsweise lässt sich so festlegen, an welcher Stelle das Popper-Element bleiben soll, was passiert, wenn ein Popper den Bildschirmrand erreicht oder welche Features es bekommen soll.

Außerdem lassen sich mit Popper.js auch eigene Popper-Elemente erstellen, falls man keines aus dem DOM nutzen möchte. Popper.js ist mit AMD und CommonJS kompatibel und dank der JSDoc-Page auch vollständig dokumentiert. Auch die geringe Größe von etwa 3,5 KB minified ist von Vorteil, da so keine Dependencies erforderlich sind. Installieren lässt sich die Library per NPM, Bower oder jsDelivr.

Über die offizielle Projektwebsite oder über GitHub kann die aktuelle Version von Popper.js heruntergeladen werden. Dort findet sich auch die zugehörige Dokumentation. Die Webseite selbst dient als Demo, die die verschiedenen Features von Popper.js aufzeigt – gleichzeitig gibt es dort auch Beispiele dafür, was ohne die Verwendung von Popper.js passieren kann:

Compute free space to decide the best placement can be a pain #withoutPopperJS ! https://t.co/gUZAFKLAxY @twitter pic.twitter.com/I6pMkeKzlQ

— Federico Zivolo (@FezVr4sta) 14. April 2016