Dicas

Dicas exibem texto informativo quando os usuários passam o mouse, focalizam ou tocam em um elemento.

Quando ativada, dicas exibem um rótulo de texto identificando o elemento, como uma descrição de sua função.

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

Dicas posicionadas

O Tooltip tem 12 posicionamentos para ser escolhido. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.

Dicas customizadas

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

Dicas com seta

Você pode usar a propriedade arrow para dar à sua dica uma seta indicando a qual elemento se refere.

<Tooltip title="Add" arrow>
  <Button>Arrow</Button>
</Tooltip>

Elemento filho customizado

A dica precisa aplicar eventos DOM ao seu elemento filho. A dica precisa aplicar eventos DOM ao seu elemento filho.

const MyComponent = React.forwardRef(function MyComponent(props, ref) {
  //  Distribua as propriedades para o elemento DOM subjacente.
  return <div {...props} ref={ref}>Bin</div>
});

// ...

<Tooltip title="Excluir">
  <MyComponent>
</Tooltip>

Você pode encontrar um conceito similar no guia encapaulando componentes.

Gatilhos

Você pode definir os tipos de eventos que fazem com que uma dica seja exibida.

Dicas controladas

Você pode usas as propriedades open, onOpen e onClose para controlar o comportamento da dica.

<Tooltip open={open} onClose={handleClose} onOpen={handleOpen} title="Add">
  <Button>Controlled</Button>
</Tooltip>

Largura variável

A dica (Tooltip) quebra o texto longo por padrão para torná-lo legível.

<Tooltip title={longText}>
  <Button sx={{ m: 1 }}>Default Width [300px]</Button>
</Tooltip>
<CustomWidthTooltip title={longText}>
  <Button sx={{ m: 1 }}>Custom Width [500px]</Button>
</CustomWidthTooltip>
<NoMaxWidthTooltip title={longText}>
  <Button sx={{ m: 1 }}>No wrapping</Button>
</NoMaxWidthTooltip>

Interativo

Dicas são interativas por padrão (WCAG 2.1 success criterion 1.4.13). Ela não será fechada quando o usuário passar por cima da dica antes que leaveDelay expire. Você pode desativar esse comportamento (assim falhando o critério de sucesso que é necessário para alcançar AA) passando disableInteractive.

<Tooltip title="Add" disableInteractive>
  <Button>Not interactive</Button>
</Tooltip>

Elementos desabilitados

Por padrão os elementos desabilitados como <button> não disparam interações do usuário, então uma Tooltip não será ativada em eventos normais, como passar o mouse. Para acomodar elementos desabilitados, adicione um elemento encapsulador simples, como um span.

⚠️ Para trabalhar com o Safari, você precisa de pelo menos um display block ou flex item abaixo do elemento que encapsula a dica.

<Tooltip title="You don't have permission to do this">
  <span>
    <Button disabled>A Disabled Button</Button>
  </span>
</Tooltip>

Se você não estiver manipulando com um componente Material-UI que herde de ButtonBase, por exemplo, um elemento <button> nativo, você também deve adicionar a propriedade CSS pointer-events: none; ao seu elemento quando desabilitado:

<Tooltip title="Você não tem permissão para esta tarefa">
  <span>
    <button disabled={disabled} style={disabled ? <Tooltip title="Você não tem permissão para esta tarefa">
  <span>
    <button disabled={disabled} style={disabled ?

Transições

Use uma transição diferente.

<Tooltip title="Add">
  <Button>Grow</Button>
</Tooltip>
<Tooltip
  TransitionComponent={Fade}
  TransitionProps={{ timeout: 600 }}
  title="Add"
>
  <Button>Fade</Button>
</Tooltip>
<Tooltip TransitionComponent={Zoom} title="Add">
  <Button>Zoom</Button>
</Tooltip>

Seguir o cursor

Você pode habilitar a dica para seguir o cursor definindo followCursor={true}.

Disabled Action

<Tooltip title="You don't have permission to do this" followCursor>
  <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
    Disabled Action
  </Box>
</Tooltip>

Elemento virtual

No caso de você precisar implementar um posicionamento customizado, você pode usar a propriedade anchorEl: O valor da propriedade anchorEl pode ser referência para um elemento DOM falso. Você precisa criar um objeto com a estrutura definida como VirtualElement.

Hover

Exibindo e ocultando

A dica normalmente é exibida imediatamente quando o mouse do usuário passa sobre o elemento e se oculta imediatamente quando o mouse do usuário sai. Um atraso na exibição ou ocultação da dica pode ser adicionado por meio das propriedades enterDelay e leaveDelay, conforme mostrado na demonstração de dicas controladas acima.

No celular, a dica é exibida quando o usuário pressiona longamente o elemento e oculta após um atraso de 1500 ms. Você pode desativar esse recurso com a propriedade disableTouchListener.

<Tooltip title="Add" enterDelay={500} leaveDelay={200}>
  <Button>[500ms, 200ms]</Button>
</Tooltip>

Acessibilidade

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tooltip)

Por padrão, a dica apenas rotula seu elemento filho. Isso é notavelmente diferente de title que pode rotular ou descrever seu elemento filho, dependendo se o filho já tem um rótulo. Por exemplo, em:

<button title="alguma informação a mais">Um botão</button>

o title atua como uma descrição acessível. Se você quer que a dica aja como uma descrição acessível, você pode passar describeChild. Observe que você não deveria usar describeChild se a dica fornece somente um rótulo visual. Caso contrário, um elemento filho não teria um nome acessível e a dica violaria success criterion 2.5.3 in WCAG 2.1.

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>
<Tooltip describeChild title="Does not add if it already exists.">
  <Button>Add</Button>
</Tooltip>

API

<Tooltip />