Properties
Show Arrow
Die Show-Arrow-Property bestimmt, ob der Tooltip eine Pfeilspitze besitzt, die auf das Bezugselement zeigt. Bei True wird der Tooltip mit einem Pfeil angezeigt (Standard), bei False erscheint der Tooltip ohne Pfeil.
Emphasis
Die Emphasis-Property steuert die visuelle Hervorhebung des Tooltips. Es stehen die Varianten Weak (Standard) und Strong zur Auswahl. Weak eignet sich für weniger auffällige Tooltips, während Strong verwendet wird, um den Tooltip stärker vom Hintergrund abzuheben.
Placement
Die Placement-Property legt fest, wo der Tooltip relativ zum Bezugselement angezeigt wird. Zur Auswahl stehen die gleichen Optionen wie beim Popover: bottom (Standard), bottom-start, bottom-end, left-start, left, left-end, right-start, right, right-end, top-start, top und top-end. Falls der Platz im Browser begrenzt ist, wird automatisch eine passende Platzierung gewählt.
Width
Die Width-Property bestimmt die Breite des Tooltips. Bei Auto (Standard) passt sich die Breite des Tooltips automatisch dem Inhalt an. Mit Fixed kann eine feste Breite festgelegt werden, die für längere Inhalte besser geeignet ist.
Animation
Die Animation-Property gibt an, ob der Tooltip mit einer Animation erscheint. Bei True wird eine Animation verwendet, bei False erscheint der Tooltip sofort ohne Animation. Der Standardwert ist True.
Delay
Die Delay-Property legt fest, wie schnell der Tooltip nach dem Hover-Ereignis erscheint. Zur Auswahl stehen None (keine Verzögerung, Standard), Slow (langsame Verzögerung) und Fast (schnelle Verzögerung).
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
Size | db-sizing-fixed-2xs |
Padding-V | db-spacing-fixed-2xs |
Padding-H | db-spacing-fixed-xs |
Border Radius | db-border-radius-2xs |
Border Height | db-border-height-3xs |
Text Size | db-type-body-sm-regular |
Elevation | db-elevation-md |
Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht (vollständig) verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter