near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Tooltip
Ein Tooltip wird in der Regel verwendet, um Icons zu erklären. Sein Inhalt besteht normalerweise aus reinem Text ohne Bilder oder formatierten Text.
Verwendung
- Aufruf über Attribute
- Aufruf über JavaScript
Verwandte Themen
Verwendung
Aufruf über Attribute
Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie dem Element einfach das Attribut mdui-tooltip="options" hinzu, um das Plugin zu aktivieren.
Beispiel
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drucken'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drucken', position: 'top'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drucken', delay: 1000}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>Aufruf über JavaScript
Komponente instanziieren:
// selector ist der CSS-Selektor oder das DOM-Element
// options sind die Konfigurationsparameter, siehe die Parameterliste unten
var inst = new mdui.Tooltip(selector, options);Parameter
| Parametername | Typ | Standardwert | Beschreibung |
|---|---|---|---|
position | string | auto | Position des Tooltips. Die möglichen Werte sind auto, bottom, top, left, right.Bei auto wird die Position automatisch bestimmt. Standardmäßig unten. Die Priorität ist bottom > top > left > right |
delay | int | 0 | Verzögerung vor dem Auslösen in Millisekunden. |
content | string | Inhalt des Tooltips. |
Methode
| Methodenname | Beschreibung |
|---|---|
open() | Öffnet den Tooltip Ermöglicht die Übergabe von Konfigurationsparametern, um den Inhalt bei jedem Öffnen zu ändern, z. B. |
close() | Schließt den Tooltip |
toggle() | Schaltet den Zustand des Tooltips um |
getState() | Gibt den Zustand des Tooltips zurück. Enthält vier Zustände (opening, opened, closing, closed). |
Ereignis
| Ereignisname | Beschreibung | Parameter |
|---|---|---|
open.mdui.tooltip | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation beginnt. | event._detail.inst: Instanz |
opened.mdui.tooltip | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation endet. | |
close.mdui.tooltip | Das Ereignis wird ausgelöst, wenn die Schließanimation beginnt. | |
closed.mdui.tooltip | Das Ereignis wird ausgelöst, wenn die Schließanimation endet. |