Die MarkeLink target opens in a new window. SBB Markenportal Logo Digitale Uhr NutzungsrechteFarben Basis-Farben Zusätzliche Farben Off-Brand FarbenAssets Icons Fahrplan-Icons PiktogrammeSprache Über UX Writing Button- und Linktexte Benachrichtigungen Formulare und Eingaben Fortschrittsanzeige Digitale Wörterliste
Einführung Über Barrierefreiheit Über diesen Guide Kontakt Weitere InformationenRollen Product Owner User Research Interaction Design Visual Design Development Content Design Testing
Erste Schritte Was ist ein Design System? Designing Coding FAQ HilfeOrganisation Prozess Contribution KontaktMobile Übersicht Basis KomponentenLyne Übersicht Was ist Lyne? Releases Presets & Themes Design Tokens Komponenten TemplatesMaps Übersicht Basis InformationenPatterns Übersicht
Guides Power-Apps Digitale Werbebanner SAP AI Design: GrundlagenVorschriften App Icons
Tooltip.
Übersicht
Was macht die Komponente?
Erlaubt den Benutzer*innen bei Bedarf Erklärungen einzublenden.
Wann soll die Komponente eingesetzt werden?
Bei kontextspezifischen Erklärungen zu Interaktionselementen oder Text.
Regeln
Der Tooltip besteht aus einem Icon und dem Overlay. Das Info-Icon ist Standard und kann bei Bedarf durch ein anderes Icon ersetzt werden.
Der Tooltip darf auch auf Texten oder Bildern platziert / zugänglich gemacht werden.
Das Overlay öffnet sich bei Klick auf das Icon. Alternativ kann der Tooltip auch mittels Hover angezeigt werden.
Im Overlay dürfen nur Freitext und Links eingesetzt werden. Der Text darf auch als Liste dargestellt werden.
Der Tooltip-Text darf maximal 300 Zeichen umfassen.
Das Overlay kann ein 'X'-Icon zum schliessen des Overlays enthalten.
Das Overlay kann auch wieder ausgeblendet werden, indem irgendwo neben das Overlay geklickt wird.
Der Spickel des Overlays, der zum Icon zeigt, kann horizontal irgendwo platziert werden (kommt auf die Position des Tooltips auf der Seite an).
Varianten
Zustände
Die Komponente hat folgende Zustände:
Hidden
Hover
Visible Above
Visible Underneath
Visible Left
Visible Right
Varianten
Standard
Spezifikationen
Link target opens in a new window.DesignLink target opens in a new window.Code