Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Tooltip

Tooltip jest zazwyczaj używany do dodawania objaśnień do ikon, jego zawartość to zazwyczaj zwykły tekst, bez obrazów i sformatowanego tekstu.

Sposób użycia

Wywołanie przez atrybuty
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Tooltip

Sposób użycia

Wywołanie przez atrybuty

Dzięki tej metodzie nie trzeba pisać kodu JavaScript. Wystarczy dodać atrybut mdui-tooltip="opcje" do elementu, aby aktywować wtyczkę.

Przykład

<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drukuj'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drukuj', position: 'top'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Drukuj', delay: 1000}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>

Wywołanie przez JavaScript

Instancjonowanie komponentu:

// selector to selektor CSS lub element DOM
// options to parametry konfiguracyjne, zobacz listę parametrów poniżej
var inst = new mdui.Tooltip(selector, options);

Uruchom

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`position`	`string`	`auto`	Pozycja Tooltipa. Możliwe wartości to `auto`, `bottom`, `top`, `left`, `right`. Gdy ustawiono `auto`, pozycja zostanie określona automatycznie. Domyślnie na dole. Priorytet to `bottom` > `top` > `left` > `right`
`delay`	`int`	`0`	Opóźnienie wyzwalania w milisekundach.
`content`	`string`		Zawartość Tooltipa.

Metoda

Nazwa metody	Opis
`open()`	Otwórz Tooltip Pozwala na przekazanie parametrów konfiguracyjnych w celu zmiany zawartości przy każdym otwarciu, np. `open({ content: 'nowa zawartość' })`. Parametry konfiguracyjne znajdują się na powyższej liście parametrów.
`close()`	Zamknij Tooltip
`toggle()`	Przełącz stan Tooltipa
`getState()`	Zwraca stan Tooltipa. Zawiera cztery stany (`opening`, `opened`, `closing`, `closed`).

Zdarzenie

Nazwa zdarzenia	Opis	Parametry
`open.mdui.tooltip`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania.	`event._detail.inst`: Instancja
`opened.mdui.tooltip`	Zdarzenie wyzwalane po zakończeniu animacji otwierania.
`close.mdui.tooltip`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania.
`closed.mdui.tooltip`	Zdarzenie wyzwalane po zakończeniu animacji zamykania.

Chip

Snackbar