È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Tooltip

Il Tooltip viene generalmente utilizzato per aggiungere spiegazioni alle icone, il suo contenuto è solitamente testo semplice, senza immagini o testo formattato.

Modalità d'uso

Chiamata via attributi
Chiamata via JavaScript

Letture correlate

Linee guida di design Material Design: Componenti - Tooltip

Modalità d'uso

Chiamata via attributi

In questo modo non è necessario scrivere codice JavaScript. Basta aggiungere l'attributo mdui-tooltip="options" all'elemento per attivare il plugin.

Esempio

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

Chiamata via JavaScript

Istanziare il componente:

// selector è un selettore CSS o un elemento DOM
// options sono i parametri di configurazione, vedi l'elenco di parametri sotto
var inst = new mdui.Tooltip(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`position`	`string`	`auto`	Posizione del Tooltip. I valori possibili includono `auto`, `bottom`, `top`, `left`, `right`. Se impostato su `auto`, la posizione verrà determinata automaticamente. Il predefinito è in basso. La priorità è `bottom` > `top` > `left` > `right`
`delay`	`int`	`0`	Ritardo di attivazione, in millisecondi.
`content`	`string`		Contenuto del Tooltip.

Metodo

Nome metodo	Descrizione
`open()`	Apri il Tooltip Consente di passare parametri di configurazione per modificare il contenuto a ogni apertura, ad esempio `open({ content: 'nuovo contenuto' })`. Vedi l'elenco dei parametri sopra.
`close()`	Chiudi il Tooltip
`toggle()`	Commuta lo stato del Tooltip
`getState()`	Restituisce lo stato del Tooltip. Include quattro stati (`opening`、`opened`、`closing`、`closed`).

Evento

Nome evento	Descrizione	Parametri
`open.mdui.tooltip`	L'evento viene attivato all'inizio dell'animazione di apertura.	`event._detail.inst`: istanza
`opened.mdui.tooltip`	L'evento viene attivato alla fine dell'animazione di apertura.
`close.mdui.tooltip`	L'evento viene attivato all'inizio dell'animazione di chiusura.
`closed.mdui.tooltip`	L'evento viene attivato alla fine dell'animazione di chiusura.

Chip

Snackbar