Erstellen Sie mit Popper.js On-Page-Sprechblasen

Jeder weiß davon Tooltips und es gibt Dutzende kostenlose Ressourcen, die Ihnen bei der Erstellung helfen. jedoch, benutzerdefinierte Nachricht Blasen oder “Poppers” sind auch sehr nützlich.

Sie sind nicht auf Hover-Events beschränkt, Sie können daher auf der Seite konsistent angezeigt werden und andere Benutzerverhalten umgehen.

Wenn Sie diese erstellen möchten Sprechblase Poppers dann auf deiner Seite Popper.js ist die beste Wahl. Es ist ein kostenloses Open-Source-Plugin, das auf der offiziellen Website von Js.org gehostet wird.

Sie finden diese Blasentipps auf vielen Websites mit komplexen Schnittstellen. Manchmal bieten sie an schnelle Tipps, Komplettlösungen, und Onboarding-Ratschläge für Leute, die neu an der Schnittstelle sind.

Mit Popper.js müssen Sie nicht warten, bis der Benutzer den Mauszeiger bewegt, um einen QuickInfo zu erstellen. Stattdessen können Sie einen Popper zwingen überall erscheinen, alle Größen, irgendeine Farbe, mit dynamischer Positionierung.

Schauen Sie sich die Popper.js-Demoseite an, um zu sehen, was ich meine. Es kommt mit einem große Auswahl an Positionierungsfunktionen Auf diese Weise können Sie die Popper-Position basierend auf der Bildschirmposition automatisch umdrehen.

Wenn der Benutzer auf der Seite nach unten blättert, verliert er möglicherweise die Popper-Blase. Mit diesem Plugin können Sie zwingen Sie es wieder in Sicht je nach Bildlaufrichtung des Benutzers nach oben (oder nach unten).

Sie haben die vollständige Kontrolle über die Grenzen, die Pfeilpositionen, die Farben der QuickInfos und vieles mehr. Nicht zu erwähnen, dass dieses Plugin wunderschön ist voll erweiterbar wenn Sie Ihre eigenen Funktionen in den Mix aufnehmen möchten.

Der gesamte Quellcode ist kostenlos auf GitHub verfügbar, wenn Sie es ausprobieren möchten.

Werfen Sie einen Blick auf die Dokumentationsseite für eine vollständige Anleitung. Hier erfahren Sie, welche Skripts Sie benötigen, wie Sie einen benutzerdefinierten Popper einrichten und wie Sie die verschiedenen Optionen für das Ansichtsfenster konfigurieren. Die beste Ressource ist jedoch die Hauptseite von Popper.js, mit Demos in Hülle und Fülle und vielen Codebeispielen.

Wenn Sie mehr über die Entwicklung erfahren möchten, lesen Sie diesen Blogeintrag des Erstellers Federico Zivolo.