Tooltip (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 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.
Arrow Tooltips
You can use the arrow prop to give your tooltip an arrow indicating which element it refers to.
<Tooltip title="Add" arrow>
<Button>Arrow</Button>
</Tooltip>
Elemento filho customizado
A dica precisa aplicar ouvintes de evento DOM ao seu elemento filho. Se o filho for um elemento React personalizado, você precisará garantir que ele repasse suas propriedades para o elemento DOM subjacente.
const MyComponent = React.forwardRef(function MyComponent(props, ref) {
// Spread the props to the underlying DOM element.
return <div {...props} ref={ref}>Bin</div>
});
// ...
<Tooltip title="Excluir">
<MyComponent>
</Tooltip>Você pode encontrar um conceito similar no guia de componentes de encapsulamento.
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 Desativados
Por padrão os elementos desativados como <button> não disparam interações do usuário, então uma Tooltip não será ativada em eventos normais, omo passar o mouse. To accommodate disabled elements, add a simple wrapper element, such as a span.
⚠️ In order to work with Safari, you need at least one display block or flex item below the tooltip wrapper.
<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>
Mostrando e ocultando
A dica normalmente é mostrada 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>