mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Infobulle

L’infobulle est généralement utilisée pour ajouter une explication à une icône. Son contenu est généralement du texte brut, sans images ni texte formaté.

Utilisation

Appel via attributs
Appel via JavaScript

Lecture associée

Spécifications Material Design : Composant - Infobulle

Utilisation

Appel via attributs

Cette méthode ne nécessite pas d’écrire de code JavaScript. Il suffit d’ajouter l’attribut mdui-tooltip="options" à l’élément pour activer ce plugin.

Exemple

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

Appel via JavaScript

Instancier le composant :

// selector est un sélecteur CSS ou un élément DOM
// options sont les paramètres de configuration, voir la liste des paramètres ci-dessous
var inst = new mdui.Tooltip(selector, options);

Exécuter

Paramètre

Nom	Type	Défaut	Description
`position`	`string`	`auto`	La position de l’infobulle. Les valeurs possibles incluent `auto`, `bottom`, `top`, `left` et `right`. Quand la valeur est `auto`, la position est déterminée automatiquement. La valeur par défaut est en dessous. La priorité est `bottom` > `top` > `left` > `right`.
`delay`	`int`	`0`	Délai d’apparition, en millisecondes.
`content`	`string`		Le contenu de l’infobulle.

Méthode

Nom de méthode	Description
`open()`	Ouvrir l’infobulle Il est possible de fournir des paramètres de configuration pour modifier le contenu à chaque ouverture, par exemple `open({ content: 'new content' })`. Les paramètres de configuration sont listés dans la section Paramètres ci-dessus.
`close()`	Fermer l’infobulle
`toggle()`	Basculer l’état de l’infobulle
`getState()`	Renvoie l’état de l’infobulle. Il existe quatre états : `opening`, `opened`, `closing` et `closed`.

Événement

Nom de l'événement	Description	Paramètres
`open.mdui.tooltip`	L’événement est déclenché au début de l’animation d’ouverture.	`event._detail.inst` : instance
`opened.mdui.tooltip`	L’événement est déclenché à la fin de l’animation d’ouverture.
`close.mdui.tooltip`	L’événement est déclenché au début de l’animation de fermeture.
`closed.mdui.tooltip`	L’événement est déclenché à la fin de l’animation de fermeture.

Chip

Snackbar