El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Tooltips

El Tooltip suele usarse para añadir una explicación a los iconos; su contenido normalmente es texto simple, sin imágenes ni texto con formato.

Modo de uso

Llamada vía atributos
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Tooltip

Modo de uso

Llamada vía atributos

Con este método no necesitas escribir JavaScript. Solo debes añadir el atributo mdui-tooltip="options" al elemento para activar este plugin.

Ejemplo

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

Llamada vía JavaScript

Instanciar el componente:

// selector es el selector CSS o un elemento DOM
// options son los parámetros de configuración, consulte la lista de parámetros de abajo
var inst = new mdui.Tooltip(selector, options);

Ejecutar

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`position`	`string`	`auto`	La posición del Tooltip. Los valores posibles son `auto`, `bottom`, `top`, `left` y `right`. Cuando es `auto`, la posición se determina automáticamente. Por defecto, aparece debajo. La prioridad es `bottom` > `top` > `left` > `right`.
`delay`	`int`	`0`	Retraso de activación, en milisegundos.
`content`	`string`		El contenido del Tooltip.

Método

Nombre del método	Descripción
`open()`	Abrir Tooltip Se pueden pasar parámetros de configuración para modificar el contenido cada vez que se abra, por ejemplo `open({ content: 'new content' })`. Los parámetros de configuración se encuentran en la lista de parámetros de arriba.
`close()`	Cerrar Tooltip
`toggle()`	Cambiar el estado del Tooltip
`getState()`	Devolver el estado del Tooltip. Incluye cuatro estados en total (`opening`, `opened`, `closing` y `closed`).

Evento

Nombre del evento	Descripción	Parámetros
`open.mdui.tooltip`	Se dispara un evento cuando empieza la animación de apertura.	`event._detail.inst`: la instancia
`opened.mdui.tooltip`	Se dispara un evento cuando termina la animación de apertura.
`close.mdui.tooltip`	Se dispara un evento cuando empieza la animación de cierre.
`closed.mdui.tooltip`	Se dispara un evento cuando termina la animación de cierre.

Chips

Snackbar