Dica
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.
Dicas simples
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="primary" className={classes.fab}>
<AddIcon />
</Fab>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="secondary" className={classes.absolute}>
<AddIcon />
</Fab>
</Tooltip>Posicionamento de dicas
O componente 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. Se o filho for um elemento React customizado, você precisará garantir que ele repasse suas propriedades para o elemento DOM subjacente.
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
Uma dica pode ser interativa. Ela não será fechada quando o usuário passar por cima da dica antes que leaveDelay expire.
<Tooltip title="Add" interactive>
<Button>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 ? { 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>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>