TooltipTooltip

Tooltip é usado para fornecer dicas de texto complementares ou informações contextuais para um elemento específico, ajudando o usuário a entender melhor a função ou propósito do elemento.

Como usar

Importe o componente conforme necessário:

import 'mdui/components/tooltip.js';

Importe o tipo TypeScript do componente conforme necessário:

import type { Tooltip } from 'mdui/components/tooltip.js';

Exemplo de uso:

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Exemplos

Tooltip de texto simples

O padrão é tooltip de texto simples. Use o atributo content para definir o conteúdo do tooltip.

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Fonte

Você também pode definir o conteúdo do tooltip pelo slot content.

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

Fonte

Tooltip rico

Defina o atributo variant como rich para criar um tooltip rico. Use o atributo headline para definir o título do tooltip e o atributo content para definir o conteúdo do tooltip.

button

<mdui-tooltip
  variant="rich"
  headline="Rich tooltip"
  content="Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Fonte

Você também pode definir o título e o conteúdo do tooltip pelos slots headline e content. Use o slot action para definir os botões de ação do tooltip.

button

Rich tooltip

Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.

Action

<mdui-tooltip variant="rich">
  <mdui-button>button</mdui-button>
  <div slot="headline">Rich tooltip</div>
  <div slot="content">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

Fonte

Posição

Use o atributo placement para definir a posição do tooltip.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Fonte

Modo de acionamento

Use o atributo trigger para definir o modo de acionamento do tooltip.

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Fonte

Atraso para abrir/fechar

Quando o modo de acionamento é hover, você pode usar os atributos open-delay e close-delay para definir o atraso para abrir e fechar o tooltip, em milissegundos.

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Fonte

Estado desabilitado

Use o atributo disabled para desabilitar o tooltip.

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Forma do tooltip. O padrão é `plain`. Os valores possíveis são: `plain`: Texto simples, adequado para textos de uma única linha. `rich`: Texto rico, pode conter título, corpo e botões de ação.
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Posição do tooltip. O padrão é `auto`. Os valores possíveis são: `auto`: Posição automática. Quando `variant="plain"`, prioriza `top`; quando `variant="rich"`, prioriza `bottom-right`. `top-left`: No canto superior esquerdo. `top-start`: Acima, alinhado à esquerda. `top`: Acima, centralizado. `top-end`: Acima, alinhado à direita. `top-right`: No canto superior direito. `bottom-left`: No canto inferior esquerdo. `bottom-start`: Abaixo, alinhado à esquerda. `bottom`: Abaixo, centralizado. `bottom-end`: Abaixo, alinhado à direita. `bottom-right`: No canto inferior direito. `left-start`: À esquerda, alinhado ao topo. `left`: À esquerda, centralizado. `left-end`: À esquerda, alinhado à base. `right-start`: À direita, alinhado ao topo. `right`: À direita, centralizado. `right-end`: À direita, alinhado à base.
`open-delay`	`openDelay`	`number`	`150`
Atraso, em milissegundos, para exibir ao passar o mouse.
`close-delay`	`closeDelay`	`number`	`150`
Atraso, em milissegundos, para ocultar ao passar o mouse.
`headline`	`headline`	`string`	-
Título do tooltip. Disponível apenas quando `variant="rich"`. Também pode ser definido via `slot="headline"`.
`content`	`content`	`string`	-
Conteúdo do tooltip. Também pode ser definido via `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Forma de acionamento. Suporta múltiplos valores separados por espaço. Os valores possíveis são: `click`: Aciona ao clicar. `hover`: Aciona ao passar o mouse. `focus`: Aciona ao receber foco. `manual`: Só pode ser aberto e fechado programaticamente. Não pode ser combinado com outras formas de acionamento.
`disabled`	`disabled`	`boolean`	`false`
Define se o tooltip está desabilitado.
`open`	`open`	`boolean`	`false`
Define se o tooltip está visível.

Eventos

Nome
`open`
Disparado quando o tooltip começa a ser exibido. Pode impedir a abertura chamando `event.preventDefault()`.
`opened`
Disparado quando a animação de exibição do tooltip é concluída.
`close`
Disparado quando o tooltip começa a ser ocultado. Pode impedir o fechamento chamando `event.preventDefault()`.
`closed`
Disparado quando a animação de ocultação do tooltip é concluída.

Slots

Nome
(padrão)
Apenas o primeiro elemento do slot padrão será usado como elemento alvo.
`headline`
Título do tooltip. Só é válido quando `variant="rich"`.
`content`
Conteúdo do tooltip. Pode conter HTML. Se for apenas texto simples, pode-se usar o atributo `content` como alternativa.
`action`
Botões na parte inferior do tooltip. Só é válido quando `variant="rich"`.

CSS Parts

Nome
`popup`
Contêiner do tooltip.
`headline`
Título.
`content`
Corpo.
`action`
Botões de ação.

Propriedades CSS personalizadas

Nome
`--shape-corner-plain`
Tamanho da borda arredondada do componente quando `variant="plain"`. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--shape-corner-rich`
Tamanho da borda arredondada do componente quando `variant="rich"`. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--z-index`
Valor CSS `z-index` do componente.

Capítulo anterior

TextField Campo de texto

Próximo capítulo

TopAppBar Barra de aplicativo superior