Tooltip ​

Ein Tooltip wird eingesetzt, um dem Nutzer ergänzende Textinformationen zu einem Element anzuzeigen.

Overview ​

Intro ​

Introbild

Ein Tooltip wird eingesetzt, um dem Nutzer ergänzende Textinformationen zu einem Element anzuzeigen.

Verwendung ​

👍 Do👎 Don't
...wenn Kontextbezogene Informationen angezeigt werden sollen.
...wenn Inhalte, die das dazugehörige User Interface Element beschreiben, dargestellt werden sollen.
...wenn Inhalte vermutlich nur einmal gelesen werden und dem Nutzer dann bekannt sind.		...wenn für den Nutzer kritische Informationen, die für den Abschluss eines Arbeitsflusses benötigt werden, angezeigt werden sollen (siehe dazu Text field → Varianten: Eingabefeld mit Hilfetext.
...wenn der Nutzer auf Vorgänge hingewiesen werden soll (siehe dazu Hinweis- und Rückmeldungen).
...wenn Inhalte hervorgehoben oder Statusinformationen angezeigt werden sollen (hierfür eignet sich die Komponente Callout).
...wenn umfassende Hilfestellung, die sich auf mehr als ein Element bezieht, angeboten werden soll (siehe dazu Side Panel).

Guidelines ​

Aufbau ​

Ein Tooltip besteht aus einem Hintergrund und dem Tooltip-Inhalt. Der Inhalt kann nur rein textuell sein, der Text kann fett gedruckt oder kursiv formatiert sein, Absätze sind möglich. Ganze Sätze werden im Tooltip mit einem Satzzeichen beendet.

Anordnung & Gruppierung ​

Es gibt sieben verschiedene Kontexte mit individuellen Anordnungen und Gruppierungen, die nachfolgend aufgeführt werden.

Standard (Default) ​

Der Tooltip wird angezeigt, nachdem der Nutzer mit der Maus über ein beliebiges Element fährt.

Beispiel Tooltip

Textlabel  ​

Der Tooltip wird angezeigt, sobald der Nutzer mit der Maus über ein Textlabel fährt, in diesem sollte sich das Material "Info"-Icon befinden.

Tooltip bei Textlabel

In einer Feldbezeichnung  ​

Der Tooltip wird angezeigt, wenn der Nutzer mit der Maus über die Feldbezeichnung oder das Eingabefeld fährt. Empfohlen wird, den Tooltip oberhalb der Feldbezeichnung anzeigen zu lassen, um nicht die darauf folgenden Eingabefelder zu überdecken.

Tooltip im Label

In einer Spaltenbezeichnung der Tabelle ​

Der Tooltip wird angezeigt, wenn der Nutzer mit der Maus über die Spaltenbezeichnung im Spaltenkopf fährt.

Tooltip bei einer Spaltenbezeichnung der Tabelle

Bei einer Inline Aktion der Tabelle ​

Der Tooltip wird angezeigt, wenn der Nutzer mit der Maus über die Inline Aktion fährt.

Tooltip einer Inline Aktion in einer Tabelle

Bei Zellen einer Tabelle ​

Tooltips bei Zellen können für viele verschiedene Anwendungsfälle verwendet werden:

  • Für die Bereitstellung zusätzlicher Details zum Inhalt einer Zelle - wenn die Verwendung von Details (Aufklappen nach unten) zu viel wäre oder aus anderen Gründen unerwünscht ist.
  • Zur Bereitstellung des vollständigen Textes einer Zelle, wenn dieser zu lang ist, um in die Zelle selbst zu passen - wenn ein Umbruch des Zellinhalts unzureichend oder aus anderen Gründen unerwünscht ist.

Tooltip bei Zellen einer Tabelle

Bei Menubars ​

Tooltips können für Elemente der obersten Ebene konfiguriert werden, um zusätzliche Informationen bereitzustellen, insbesondere für Elemente, die nur Icons sind. Wenn ein Element der obersten Ebene deaktiviert ist, wird der entsprechende Tooltip nicht angezeigt.

Tooltip bei Menubars

Weitere Leitlinien zur Verwendung ​

👍 Do👎 Don't
Drück dich so kurz und präzise wie möglich aus.
Beende vollständige Sätze mit einem Satzzeichen.
Achte auf die Positionierung und Länge, damit der Tooltip gut sichtbar ist.		Benutze keine interaktive, fokussierbare Inhalte innerhalb des Tooltip (z. B. Link, Button).
Benutze keine langen Textinhalte.

Verhalten ​

Ein Tooltip wird in direkter Nähe des Elements angezeigt, mit dem dieser verbunden ist. Mögliche Positionen eines Tooltip sind: oberhalb oder unterhalb des Elements und rechts oder links. Die Höhe passt sich dem Inhalt an, die maximale Zeichenlänge sollte nicht mehr als 400 Zeichen betragen. Der Tooltip öffnet sich, sobald der Nutzer mit der Maus über das entsprechende Element fährt und verschwindet erst dann, wenn der Mauszeiger das Element verlässt. Der Tooltip ist initial nicht sichtbar.

Verzögerung der Anzeige ​

Die Verzögerung vor dem Erscheinen der Tooltips kann, wenn nötig, für den Hover und den Tastaturfokus separat konfiguriert werden. Die Verzögerung bis zum Verschwinden des Tooltips, sobald der Mauszeiger das Zielelement verlässt, kann ebenfalls separat konfiguriert werden. Beim Fokussieren eines anderen Elements, wird der Tooltip sofort geschlossen, um Verwechslungen zu vermeiden.

Manuelle Triggerung ​

Tooltips können so konfiguriert werden, dass sie nicht automatisch bei Hover oder Tastaturfokus erscheinen, sondern nur programmatisch ausgelöst werden. Auf diese Weise lassen sich so genannte toggletips erstellen, d. h. Tooltips, die vom Benutzer manuell ein- und ausgeblendet werden können.

Barrierefreiheit ​

Tooltips sind mit dem Attribut aria-describedby semantisch mit ihren Zielelementen verknüpft und werden von Screenreadern angezeigt, wenn das Element den Tastaturfokus erhält.

Bei Tooltips auf Elementen ohne spezielle Tooltip-APIs kann jedoch nicht garantiert werden, dass sie korrekt angezeigt werden, da die Anzeige von aria-describedby-Attributen vom Typ des HTML-Elements und dem role-Attribut abhängt. Außerdem variiert sie zwischen verschiedenen Screenreadern. Tests mit Screenreadern sind notwendig, um die Zugänglichkeit von Tooltips für diese Elemente zu gewährleisten.

Die Tooltip-Funktion unterstützt derzeit nicht die Anzeige durch langes Drücken auf Touchscreen-Geräten.

Es gilt zu beachten, dass Vaadin-Komponenten und andere UI-Elemente standardmäßig das Vorhandensein von Tooltips in keiner Weise implizieren. Dies kann dazu führen, dass sie für Benutzer schwer zu entdecken sind.

Im Allgemeinen sind sichtbare Beschriftungen immer Tooltips vorzuziehen. Ein separat definiertes unsichtbares aria-label-Attribut bietet normalerweise eine bessere Zugänglichkeit als ein Tooltip.

Tastaturbedienung ​

Der Tooltip öffnet sich, wenn dieser über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") fokussiert wird. Ist der Tooltip im Fokus, kann dieser über die Tastaturtaste („Esc“) geschlossen werden.

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Ftooltip