Tooltip
Hinweis-Tooltip
Die Tooltip-Komponente zeigt zusätzliche Informationen beim Überfahren (hover) oder Klicken (click) eines Elements an. Bei 'click' Trigger wird der Tooltip nur bei Klick oder Touch sichtbar, bei 'hover' Trigger beim Überfahren mit der Maus.
Codebeispiel
<Tooltip text="Lorem ipsum dolor sit amet!" title="Lorem ipsum"><Button>Lorem ipsum</Button></Tooltip>
<Tooltip text="Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat." trigger="click" position="top"><Button>Dolor sit amet</Button></Tooltip>
<Tooltip text="Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum." title="Consetetur sadipscing" trigger="hover" position="bottom"><Button>Elitr, sed diam</Button></Tooltip>
<Tooltip text="Ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam." trigger="click" position="left"><Button>Nonumy eirmod</Button></Tooltip>
<Tooltip text="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." trigger="click" position="right"><Button>Tempor invidunt</Button></Tooltip>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| text | string | Haupttext des Tooltips | - |
| title | string | Optionaler Titel des Tooltips | - |
| trigger | 'hover' | 'click' | Trigger-Modus: hover = bei Mausüberfahren, click = nur bei Klick/Touch | 'hover' |
| position | 'top' | 'bottom' | 'left' | 'right' | Position des Tooltips | 'top' |
| class | string | Zusätzliche CSS-Klassen | '' |
Fragments
| Bezeichner | Beschreibung | Default |
|---|---|---|
| default | Das Element, das den Tooltip auslöst |