Anzeige
Anzeige
Ratgeber
Artikel merken

User-Experience vor Design: Wie Tooltips richtig umgesetzt werden

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.

Von Jonathan Schneider
3 Min. Lesezeit
Anzeige
Anzeige
Tooltips mit Logik und guter User-Experience. (Bild: Shutterstock)

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige