Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

User-Experience vor Design: Wie Tooltips richtig umgesetzt werden

Tooltips mit Logik und guter User-Experience. (Bild: Shutterstock)

Libraries für HTML-Tooltips gibt es wie Sand am Meer. Doch primär geht es bei ihnen eher um eine hübsche und visuelle Darstellung. Die programmierte JavaScript-Logik ist eher dürftig und kaum relevant, obwohl diese mindestens genauso wichtig sein sollte.

Doch was bringen uns die hübschesten Tooltips und Popover, wenn wir nur eine schlechte User-Experience anbieten? Das grundlegende Problem von Tooltips: die Positionierung. Sie ist meist fix oder absolut und – somit nicht mehr relativ zum Dokument.

Die Problematik von Tooltips

Tooltips oder auch Popover werden meist angezeigt, wenn zuvor eine Aktion ausgelöst worden ist. Sie erscheinen dann umgehend in der Nähe der ausgeführten Aktion und liefern Informationen oder bieten weitere Optionen an.

Da das Element aber nur auf Zuruf angezeigt werden darf, muss es zuvor versteckt worden sein und sich passend einblenden. Das daraus resultierende Problem ist die Darstellung. Positionieren wir das Element absolut oder fix, werden wir spätestens beim Scrollen die Verbindung zum Aktions-Element verlieren. Fatal wenn wir eine Aktion auslösen, die ein wiederkehrendes Icon benutzt.

Eine andere Idee wäre, den Aktions-Button zu modifizieren und  dort den relativen Tooltip zu hinterlegen. Mit CSS könnten wir ihn anschließend soweit modifizieren, dass er sich visuell außerhalb der Box befindet und einen Tooltip darstellt. Scrollen wir jetzt, bleibt der Tooltip natürlich am Element kleben. Das Problem hier: Ist der Viewport zu Ende, aber das Aktions-Element noch zu sehen, verschwindet der Tooltip auf eher unschöne Weise.

Beide Ansätze sind leider in keinem Fall befriedigend für eine High-Level-Application. Die User-Experience ist eingeschränkt und muss dem Design den Vorrang lassen. Besonders da Webseiten sich immer mehr zu Applikationen entwickeln und in den wenigsten Fällen nur noch aus reinen HTML-Dateien bestehen, wachsen natürlich auch die Anforderungen des Konsumenten. Was auf dem Desktop schon seit langem angelernt ist, soll jetzt auch auf Web-Applikationen übertragen werden können.

Damit die Problematik noch besser verstanden werden kann, gibt es hier drei interessante Beispiele.

Tooltips richtig umsetzen

Mit Popper.JS sitzen Tooltips immer da, wo sie sitzen sollen. (Screenshot: Popper.JS)
Mit Popper.JS sitzen Tooltips immer da, wo sie sitzen sollen. (Screenshot: Popper.JS)

Wie wir eben schon gesehen haben, ist die Umsetzung eines Tooltips mit guter User-Experience keine einfache Aufgabe. Damit es trotzdem klappt, brauchen wir ein wenig – oder auch ein wenig mehr – JavaScript-Magic. Hier kommt die neue JavaScript-Lib PopperJS zum Einsatz.

PopperJS ist dabei nicht einfach eine weitere Lib für hübsche und schnelle HTML-Tooltips, die mit ein bisschen JavaScript schnell angezeigt werden. Hier geht es mehr um die Logik und die angesprochenen Probleme zu lösen. Es beinhaltet auch keine besondere CSS-Dateien, die die Tooltips direkt hübsch aussehen lassen. Es geht primär um die Logik hinter dem Tooltip.

Um einen Tooltip mit PopperJS zu erstellen, kann die Lib zuvor von GitHub oder der offiziellen Webseite runtergeladen werden. Dann wird die Lib im Projekt eingebunden und kann jetzt benutzt werden, um ein Tooltip zu erstellen.

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
// popper options here
}
);

In diesem Fall selektieren wir mit .my-button unseren Aktions-Button und mit .my-popper ein Element, das den Tooltip darstellt. Hierzu gibt es kein Design – das muss extra definiert und in CSS eingebunden werden.

Weitere Parameter und Optionen können direkt aus der Dokumentation entnommen werden. PopperJS verfügt natürlich auch über Callbacks, Update-Funktionen und viele weitere nützliche Einstellungen – grundsätzlich alles, was von einer umfangreichen Lib erwartet werden kann. Wie das dann in der Praxis aussieht und was alles damit möglich ist, könnt ihr euch in folgenden Beispielen angucken.

Grundsätzlich sorgt Popper dafür, dass der gewählte Tooltip immer am Aktions-Button „klebt“ und sich dauerhaft im Viewport hält. Sollte sich mein Aktions-Button ganz am oberen Rand befinden, wird das Tooltip darunter angezeigt. Haben wird jedoch weniger Platz unterhalb des Elements, wird es automatisch oberhalb angezeigt.

Dass noch das Design für die Tooltips entwickelt werden muss, damit es auch hübsch aussieht, ist klar. Wichtig ist nur, dass die User-Experience nicht vom Design eingeschränkt wird oder eine hübsche Tooltip-Lib diesen Schritt einfach überspringt. Meist steckt doch mehr dahinter, als oft angenommen wird.

Könnt ihr euch den Einsatz dieser Lib vorstellen oder ist die angesprochene Problematik für euch eher unwichtig?

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst