Inhaltsbereich Navigation Navigation Fußzeile

Tooltip

Verwendung

Als optionale Komfortfunktion geben Tooltips eine kontextspezifische Hilfestellung zu Inhalten und Funktionen. Sie werden eingesetzt, wenn zusätzliche Hilfetexte für das Verständnis von bestimmten Feldern zwingend notwendig sind und es keine andere Möglichkeit gibt, diese Hilfen dauerhaft sichtbar zu platzieren.

Gerade bei erklärungsbedürftigen Sachverhalten ist ein erklärender, dauerhaft sichtbarer Text definitiv die bessere Content-Strategie. Nur so kann sichergestellt werden, dass wesentliche Informationen durch Nutzende wahrgenommen und verstanden werden, was auch in Usability-Tests mit echten Nutzenden der Anwendungen bestätigt wurde. Daher schließt das Design System die pauschale Zuordnung dieser Hilfen zu bestimmten Inhaltselementen aus.

Sollten sie wirklich nach sorgfältiger Abwägung eingesetzt werden müssen, dann erklären diese Texte in kurzer Form die Bedeutung von Seitenelementen oder stellen Prozess-spezifische Informationen bereit.

Mögliche Inhalte von Tooltips

Tooltips enthalten lediglich einfache Text-Strings. Sie dürfen aus Sicherheitsgründen keinerlei Markup enthalten, d. h. Formatierungen wie Textabsätze und Listen, aber insbesondere auch Hyperlinks sind in Tooltips nicht erlaubt.

Tooltips sollten idealerweise weniger als 300 Zeichen beinhalten. Diese Textlänge sollte aber nur in absoluten Ausnahmefällen ausgereizt werden, da nicht garantiert werden kann, dass der Text auf Mobilgeräten vollständig lesbar neben den zu erklärenden Elementen dargestellt wird.

Wenn längere oder formatierte Inhalte optional einblendbar angezeigt werden sollen, dann ist eventuell ein Akkordeon das geeignetere Muster.

In früheren Versionen des Design Systems wurde an dieser Stelle die veraltete Feldhilfe-Komponente beschrieben. Diese kann weiterhin in bereits bestehenden Verfahren benutzt werden. Neue oder wesentlich überarbeitete Verfahren werden angehalten, die universeller einsetzbare Tooltip-Komponente zu verwenden.


Beschränkungen

Angaben dazu, welche Eingaben oder Auswahlen in Formularelementen erwartet werden, inklusive Hinweisen zur möglichen oder eingeschränkten Notation wie z. B. Datumsangaben, dürfen nicht in Tooltips hinterlegt werden, sondern müssen als stets sichtbarer Hilfetext am jeweiligen Feld angezeigt werden.

Tooltips sind kombinierbar mit:

  • input text
  • input mit zusätzlichem Logo oder Icon (z. B. Elster oder NPa zur Kennzeichnung der Datenquelle)
  • input mit Buttons (Suche, Passwort, Datum)
  • select (auch mit Icon neben select)
  • textarea
  • checkbox: an jedem Label oder an der Überschrift bzw. Legend für eine Gruppe von Checkboxen
  • radiobuttons: an der Überschrift bzw. Legend für eine Gruppe von Radiobutton, jedoch nicht an den einzelnen Labels
  • fieldset ohne grafische Darstellung
  • fieldset mit grafischer Darstellung, z. B. gestaltete Eingabefelder für KFZ-Kennzeichen rechts neben Kennzeichen
  • Formularelemente in Tabellen:
    • Im Tabellenkopf TH: nein
    • In Tabellenzellen TD: ja
  • Bestimmte erklärungsbedürftige Kacheln für Startseite, Registrierung & Anmeldung

Tooltips sind nicht kombinierbar mit:

  • Passwort-Feldern – die Regeln zur Passwortvergabe z. B. im Registrierungsprozeß werden immer sichtbar angezeigt
  • Elementen mit title-Attribut
  • Feldern zur Eingabe von E-Mail-Adressen
  • Fußnoten – diese enthalten bereits erklärender Text, der vollständig dargestellt werden muss
  • Links – diese müssen für sich oder aus ihrem Kontext heraus selbsterklärend sein
  • Überschriften und Fließtexte inklusive Listen, denn diese sollen selbsterklärend sein. Falls eine zusätzliche Erläuterung als nötig angesehen wird, so weist dies auf Mängel im Text hin. Dieser muss dann auf der Maske selbst benutzerfreundlich und allgemeinverständlich angepasst werden.

Interaction Design

  • Maus- und Touch-Bedienung: Klick oder Tap (bzw. Doppel-Tap bei aktiviertem Screenreader) auf das auslösende Element öffnet das Tooltip, ein Klick oder Tap außerhalb des Tooltips schließt dieses wieder.

  • Tastatur-Bedienung: Erreichbar per Tab-Taste bzw. Swipe auf Touch-UIs, Auslösen des Tooltips per Enter-Taste oder Leerschritt-Taste (wenn fokussiert), Schließen über Esc-Taste oder erneutes Betätigen des auslösenden Elements oder eine Interaktion auf einem anderen Element.

title-Tooltips

Tooltips in Form der title-Attribute von Elementen werden nur als optionale zusätzliche Unterstützung angeboten. Mögliche Anwendungsfälle sind visuelle Elemente wie Icon-Buttons, denen eine weitere Erklärung zugeordnet werden soll.

Screenshot zweier Links, in denen der bereits sichtbare Linktext im title-Tooltip wiederholt wird.
Fehlerhafte weil unnötig redundante Verwendung von title

title-Attribute dienen nicht einer ausschließlichen Hilfsfunktion, da sie verschiedene Mängel im Bereich der Barrierefreiheit aufweisen, insbesondere bei der fehlenden Tastatur-Bedienbarkeit. Wenn längere Hilfetexte angeboten werden sollen, dann müssen hierfür dauerhaft sichtbare Texte eingesetzt werden, auch in Form von Links zu Hilfeseiten im Portal oder Fußnoten.

Sie können optional (aber nicht zwingend) eingesetzt werden, um darauf hinzuweisen, dass Links in neuen Tabs oder Fenstern geöffnet werden. Allerdings ist diese Technik kritisch zu betrachten, da sie aus der über 20 Jahre alten WCAG 1 stammt, also aus Zeiten als Nutzende noch keine volle Kontrolle über das Verhalten von Links hatten und Browser-Tabs noch nicht erfunden waren. Die bessere Lösung ist hier, Links nicht in neuen Fenstern zu öffnen, sofern dies nicht der Anwendungslogik zuwiderläuft, wie zum Beispiel bei Links auf Hilfeseiten.

Tooltips dürfen nicht zur Maskierung redaktioneller Mängel und unverständlicher Formulierungen in den angezeigten Texten benutzt werden.

Positionierung & responsives Verhalten

  • Tooltips orientieren sich nicht am Grid, sondern erscheinen zentriert über ihrem Trigger-Button oder -Link
  • Tooltips halten mindestens 12px Abstand zu den Rändern des Viewports.
Tooltips auf einem kleinen Bildschirm immer relativ und in unmittelbarer Nähe zu einem beliebig positionierten Trigger-Element.
Breakpoint XS
Tooltips auf einem großen Bildschirm immer relativ und in unmittelbarer Nähe zu einem beliebig positionierten Trigger-Element.
Breakpoint XL

Do’s and Dont’s

So:

  • Kurze Erläuterung von erklärungsbedürftigen Sachverhalten, erwarteten Eingaben oder Auswahlen.
  • Nur sparsam und zielgerichtet einsetzen.
  • Tooltips erhalten nie den Fokus, dieser bleibt auf dem Eltern-Element.
  • Tooltips können mit der Escape-Taste ausgeblendet werden.
  • Tooltips enthalten keine interaktiven Elemente.

So nicht:

  • Wiederholung von Label-Texten oder Legenden.
  • Verweise auf Gesetzestexte – hierfür sollen Fußnoten oder Fließtexte benutzt werden.
  • Als allgemein bekannt vorauszusetzende Funktionen erklären.
  • Relevante Informationen mit rechtlicher oder finanzieller Tragweite ausschließlich als Tooltip.
  • Tooltips beim Bewegen der Maus schließen.