Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English 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

Darstellung des Tooltips


Spezifikationen

DesignCode
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies