Tippy.js oder Popper?

Tippy.js: Individuelle Tooltips und Popovers gestalten
Keine Kommentare

Tippy.js ist eine Library, die auf Popper.js aufbaut. Genutzt werden kann Tippy für Tooltip- und Popover-Interaktionen, die den Nutzer mit weiteren Informationen zu einem Element versorgen. Die Library ist WAI-ARIA-kompatibel, kann also für die barrierefreie Webentwicklung genutzt werden.

Wenn der Mauszeiger über ein Element gehalten wird, soll häufig ein erklärender Text angezeigt werden. Tippy.js bietet dafür gleich zwei Optionen an: Tooltips, die eine einfache Einblendung auslösen, und Popovers, die diese Einblendungen interaktiv gestalten. Die Steuerung dieser Effekte ist nicht nur über den klassischen Mauszeiger möglich, sondern auch mit der Tastatur und auf Touchscreens. Laut Website zum Projekt soll Tippy.js so für 99 Prozent der Desktop-Nutzer und 97 Prozent der Nutzer auf Mobilgeräten funktionieren.

Tippy.js befindet sich in der aktiven Weiterentwicklung und hat mit dem kürzlich veröffentlichten Release 5.1.3 einige Bugfixes erhalten. Dazu gehört, dass das Verhalten von trigger: 'mouseenter click' verändert wurde.

Tippy vs Popper: Verschiedene Zielgruppen

Tippy beruht auf Popper.js, einer Library, die für die Positionierung von Mouseover-Events verwendet wird. Popper hat also den gleichen Fokus wie Tippy, aber eine andere Zielgruppe. In Popper muss vieles selbst entwickelt werden, wofür Tippy.js  Out-of-the-Box-Lösungen bietet. Das betrifft beispielsweise die Ausrichtung des Mauszeigers und des Website-Elements zu einander und ist somit vor allem für diejenigen Entwickler geeignet, die eine einfache Lösung suchen, während Popper.js sich eher an komplexere Fälle wendet, für die eine individuelle Implementierung nötig ist.

Auch Tippy.js bietet jedoch einige Features. So ist die Library standardmäßig dazu geeignet, barrierefreie Anwendungen anhand der WAI-ARIA-Spezifikation zu schreiben und bietet Support für typisierten Code mit TypeScript.

Tippy.js steht unter MIT-Lizenz. Weitere Informationen zur Library können der Website zum Projekt entnommen werden. Tippy kann über npm und Yarn installiert werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -