Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Komponenten    3.14.Tooltips

3.14.Tooltips

Tooltips sind Elemente, die eingesetzt werden, um dem Nutzer ergänzende Informationen anzuzeigen, wenn er den Mauszeiger über ein Element bewegt, mit der Maus darauf geht oder es auf Touchscreens antippt.

3.0.Komponenten      3.14.Tooltips      3.14.1.Nutzung

3.14.1.Nutzung

Wird ein Tooltip aktiviert, wird ein Textlayer angezeigt, der Hinweise enthält, wie z.B. eine Beschreibung einer Funktion. Bei der Umsetzung gilt zu beachten:

Knappe Information

Tooltips erscheinen als Hover-Elemente wenn der Mauszeiger auf dem Grundelement steht oder bei Touch auf dieses Element. Sie werden nach ca. 1,5 Sekunden ausgeblendet, wenn der Mauszeiger nicht mehr über dem Grundelement steht..

Gekoppelt

Tooltips werden immer in direkter Nähe des Elements angezeigt, mit dem sie verbunden sind.

Kurz

Tooltips enthalten nur einen kurzen beschreibenden Text.

Sichtbar

Auf einem Desktop erscheinen Tooltips in der Mitte der Klickziele und bleiben stehen, solange sich der Zeiger innerhalb des Zieles bewegt.

Auf Mobilgeräten wird das Tooltip durch das Antippen/Halten eines Bildschirmelements oder einer Komponente ausgelöst. Tooltips sollten durchgängig so lange angezeigt werden, wie der Nutzer das Element durch Drücken hält oder den Mauszeiger darüber bewegt.

 

Bitte bedenken Sie auch: wenn bei einem Element (beispielsweise ein Button oder ein anderes Objekt) User häufig den Tooltip nutzen, um das Objekt zu verstehen, liegt wahrscheinlich ein Usability-Problem vor.  Hier werden die Informationen nicht auf die einfachste Art und Weise übermittelt.

Some Image
    Some Image
    Abbildung

    Beispiele für Tooltips, die bei Daimer verwendet werden 

      3.0.Komponenten      3.14.Tooltips      3.14.2.Download-Ressourcen

      3.14.2.Download-Ressourcen

      Die Designs der Tooltip-Komponente gibt es für Sketch und sind im Daimler Design Kit enthalten. Sie können diese entweder kopieren und in Ihre Designs einfügen, oder die Sketch-Datei als verlinkte Sammlung nutzen und die Symbole importieren.

      Siehe Sketch Design Kit (verfügbar ab August 2019)