Tooltips zeigen kontextbezogen Informationen zu Bedienelementen an. Bei Mausbedienung werden Tooltips über Hover, bei Touchbedienung über Long Press eingeblendet.
Tooltips öffnen sich bei Mausbedienung durch Hover über ein Bedienelement oder bei einer Touchbedienung durch Long Press auf ein Bedienelement. Sie sollten immer so eingeblendet werden, dass sie das Bedienelement nicht verdecken.
Tooltips werden bei Mausbedienung geschlossen, wenn der Hovered-Zustand des zugeordneten Patterns verlassen wird. Bei Touchbedienung, indem der Nutzer auf eine beliebige Stelle des Bildschirms tippt oder ein anderes Tooltip über einen Long Press aktiviert.
Verwendung
Dynamische Breite
Die Breite des Tooltip ist abhängig von der Textlänge.
Fixierte Breite
Die Breite des Tooltip ist fest definiert.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
width | string | undefined | width modifier (dynamic or fixed) |
type | string | undefined | success, error or warning variant |
label | undefined | undefined | |
anchor | undefined | undefined | |
isVisible | undefined | false | |
style | string | undefined | Additional css styles |
Beispiele
Standard Dynamic Tooltip
Standard Fixed Tooltip
Validation Tooltip
Wird bei Validation-Hinweisen verwendet.
Do's and Don'ts
Do
Tooltip zur Ansicht von Informationen bezüglich einer Funktion
Do
Anzeige der Position zum Beispiel im Slider