A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Tooltip

A tooltip jellemzően ikonok magyarázatára szolgál; a tartalma általában egyszerű szöveg, és nem tartalmaz képeket vagy formázott szöveget.

Használat

Hívás egyéni attribútumokkal
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Tooltip

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nincs szükség JavaScript-kód írására. A komponens aktiválásához egyszerűen adjon hozzá egy mdui-tooltip="options" attribútumot az elemhez.

Példa

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

JavaScript segítségével történő hívás

Komponens példányosítása:

// a selector egy CSS szelektor vagy DOM elem
// az options a konfigurációs paraméterek, lásd az alábbi paraméterlistát
var inst = new mdui.Tooltip(selector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`position`	`string`	`auto`	A Tooltip pozíciója. Az értékek lehetnek `auto`, `bottom`, `top`, `left`, `right`. Ha `auto`, a pozíció automatikusan kerül meghatározásra. Alapértelmezés szerint alul. Prioritás: `bottom` > `top` > `left` > `right`
`delay`	`int`	`0`	Késleltetés ezredmásodpercben.
`content`	`string`		A Tooltip tartalma.

Metódus

Metódus neve	Leírás
`open()`	Tooltip megnyitása Lehetővé teszi konfigurációs paraméterek átadását a tartalom módosításához minden megnyitáskor, például `open({ content: 'új tartalom' })`. A paramétereket lásd a fenti Paraméterek listában.
`close()`	Tooltip bezárása
`toggle()`	Tooltip állapotának váltása
`getState()`	Visszaadja a Tooltip állapotát. Négy állapotot tartalmaz (`opening`, `opened`, `closing`, `closed`).

Esemény

Esemény neve	Leírás	Paraméterek
`open.mdui.tooltip`	Az esemény akkor aktiválódik, amikor a nyitási animáció elkezdődik.	`event._detail.inst`: példány
`opened.mdui.tooltip`	Az esemény akkor aktiválódik, amikor a nyitási animáció befejeződik.
`close.mdui.tooltip`	Az esemény akkor aktiválódik, amikor a zárási animáció elkezdődik.
`closed.mdui.tooltip`	Az esemény akkor aktiválódik, amikor a zárási animáció befejeződik.

Chip

Snackbar