Floating UI und Popper.js 11.01.2022, 11:23 Uhr

Schwebende Elemente

Informationen über Tooltips und Popover einzublenden ist in den meisten Web-Anwendungen zum Standard geworden.
(Quelle: Shutterstock)
Mit Tooltips und Popover-Dialogen sind sicherlich schon einmal alle in Berührung gekommen. In der letzten Episode dieser Kolumne wurden sie noch im Rahmen des Onboardings genannt, werfen wir in diesem Artikel einen genaueren Blick darauf. Informationen an Anwender über Tooltips oder einen Popover-Dialog zu richten ist bei Oberflächen ein langer genutzter Quasi-Standard. Sowohl für native Anwendungen auf dem Desktop als auch im Web.
Aus Entwicklersicht können diese beiden Mechanismen tückisch sein. Sie sehen so simpel aus, die Elemente aber korrekt zu positionieren, ein Scrolling des Benutzers zu berücksichtigen und auch Änderungen am UI an sich sind allerdings gar nicht so einfach. Hilfreich sind an dieser Stelle Frameworks und Bibliotheken, die im Hintergrund diese komplexe Aufgabe übernehmen, so dass wir uns auf das Anheften beispielsweise eines Tooltips an ein Element konzentrieren können.
Die Projekt-Website zu Popper.js (Bild 1)
Quelle: Deitelhoff

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar