Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Tooltip

Tooltip (nástrojový tip) se obvykle používá k doplnění popisu k ikonám. Jeho obsahem bývá prostý text bez obrázků či formátování.

Způsob volání

Volání přes atributy
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Tooltip

Způsob volání

Volání přes atributy

Tímto způsobem není třeba psát kód v JavaScriptu. Ke spuštění pluginu stačí k danému prvku přidat atribut mdui-tooltip="options".

Příklad

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

Volání přes JavaScript

Inicializace komponenty:

// selector je CSS selektor nebo DOM prvek
// options jsou konfigurační parametry, viz seznam parametrů níže
var inst = new mdui.Tooltip(selector, options);

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`position`	`string`	`auto`	Pozice tooltipu. Možné hodnoty jsou `auto`, `bottom`, `top`, `left`, `right`. Při nastavení `auto` se pozice určí automaticky (výchozí je dole). Priorita určení je `bottom` > `top` > `left` > `right`.
`delay`	`int`	`0`	Zpoždění zobrazení v ms.
`content`	`string`		Obsah tooltipu.

Metoda

Název metody	Popis
`open()`	Otevře tooltip. Umožňuje předat konfigurační parametry pro změnu obsahu při každém otevření, například `open({ content: 'nový obsah' })`. Seznam viz parametry výše.
`close()`	Zavře tooltip.
`toggle()`	Přepne stav tooltipu.
`getState()`	Vrátí stav tooltipu. Možné stavy jsou `opening`, `opened`, `closing`, `closed`.

Událost

Název události	Popis	Parametry
`open.mdui.tooltip`	Událost bude spuštěna při zahájení animace otevírání.	`event._detail.inst`: instance
`opened.mdui.tooltip`	Událost bude spuštěna po dokončení animace otevírání.
`close.mdui.tooltip`	Událost bude spuštěna při zahájení animace zavírání.
`closed.mdui.tooltip`	Událost bude spuštěna po dokončení animace zavírání.

Chip

Snackbar