O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Tooltip

O Tooltip é geralmente usado para adicionar descrições a ícones; seu conteúdo é geralmente texto simples, sem imagens ou texto formatado.

Como usar

Chamar via atributos personalizados
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Tooltips

Como usar

Chamar via atributos personalizados

Desta forma, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-tooltip="options" ao elemento para ativar o plugin.

Exemplo

<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>

Chamar via JavaScript

Instanciar componente:

// selector é um seletor CSS ou elemento DOM
// options são parâmetros de configuração, veja a lista de parâmetros abaixo
var inst = new mdui.Tooltip(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`position`	`string`	`auto`	A posição do Tooltip. Os valores possíveis incluem `auto`, `bottom`, `top`, `left`, `right`. Quando definido como `auto`, a posição será determinada automaticamente. A posição padrão é abaixo. A prioridade é `bottom` > `top` > `left` > `right`
`delay`	`int`	`0`	Atraso para disparar, em milissegundos.
`content`	`string`		Conteúdo do Tooltip.

Método

Nome do método	Descrição
`open()`	Abrir Tooltip Permite passar parâmetros de configuração para que o conteúdo possa ser modificado cada vez que for aberto, por exemplo, `open({ content: 'novo conteúdo' })`. Veja a lista de parâmetros acima.
`close()`	Fechar Tooltip
`toggle()`	Alternar o estado do Tooltip
`getState()`	Retorna o estado do Tooltip. Contém quatro estados (`opening`, `opened`, `closing`, `closed`).

Evento

Nome do evento	Descrição	Parâmetros
`open.mdui.tooltip`	O evento é disparado quando a animação de abertura começa.	`event._detail.inst`: instância
`opened.mdui.tooltip`	O evento é disparado quando a animação de abertura termina.
`close.mdui.tooltip`	O evento é disparado quando a animação de fechamento começa.
`closed.mdui.tooltip`	O evento é disparado quando a animação de fechamento termina.

Chip

Snackbar