Tooltips und Pop-Overs mit Popper.js

Popper.js – Poppers in Web-Applikationen erstellen
Kommentare

Poppers – was ist das denn? Poppers haben weder etwas mit Popcorn noch mit Popmusik zu tun, sondern beschreiben ein Element, das sich vom übrigen Layout einer Website oder App abhebt. Bekannte Beispiele für „hervorpoppende“ Elemente sind Tooltips und Pop-Overs. Bei Popper.js handelt es sich um eine JavaScript-Library, die dabei hilft, Poppers in Web-Applikationen zu 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:

Name Popper.js
Entwickler Federico Zivolo
Projektwebsite https://popper.js.org/
GitHub https://github.com/FezVrasta/popper.js

 

Aufmacherbild: Salt popcorn, party hat and candy on the wooden table von Shutterstock / Urheberrecht: verca

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -