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>
<Tooltip title="Add">
<Fab color="primary" className={classes.fab}>
<AddIcon />
</Fab>
</Tooltip>
<Tooltip title="Add">
<Fab color="secondary" className={classes.absolute}>
<AddIcon />
</Fab>
</Tooltip>Dicas posicionadas
O Tooltip tem 12 posicionamentos para ser escolhido. Eles não têm setas direcionais; em vez disso, eles dependem do movimento que emana da fonte para transmitir direção.
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><Tooltip title={longText}>
<Button className={classes.button}>Default Width [300px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
<Button className={classes.button}>Custom Width [500px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
<Button className={classes.button}>No wrapping</Button>
</Tooltip>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 desativado:
<Tooltip title="Você não tem permissão para esta tarefa">
<span>
<button disabled={disabled} style={disabled ? { pointerEvents: 'none' } : {}}>
Um botão desabilitado
</button>
</span>
</Tooltip>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><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.
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>