Material-ui: Dica de ferramenta não funciona para<iconbutton disabled="disabled"/>

Os elementos desativados não disparam eventos. No entanto, você pode colocar um DIV por cima do elemento e ouvir o evento disparado nesse elemento.

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

A implementação dessa sugestão é semelhante a esta e funciona.

        <Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

Também estava pensando em usar a propriedade component , mas ela não funciona por causa do estilo pointer-events: none; :

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

@oliviertassinari Desculpe, não sabia. Obrigado.

@bravecow Acho que podemos adicionar um aviso se mais pessoas levantarem essa questão.

Então, a solução aceita para isso será colocar uma div entre os botões e as dicas de ferramentas? Ter uma dica de ferramenta normalmente é o mais útil em botões desabilitados, para indicar por que o botão está desabilitado.

E se adicionássemos um suporte ao componente Tooltip que indica que ele deve aparecer mesmo quando a criança está desativada? Isso apenas implementaria essa solução nos bastidores, mas pelo menos o usuário não ficaria se perguntando por que as dicas de ferramentas não funcionam em botões desabilitados.

Como você desativa o aviso de dica de ferramenta?

Como você desativa o aviso de dica de ferramenta?

@goyney https://github.com/mui-org/material-ui/issues/8416#issuecomment -332556082

@oliviertassinari Como

Tenho várias barras de ferramentas de botões que são desativadas quando o conteúdo está sendo carregado. Cada botão possui uma dica de ferramenta. Depois que o documento é carregado, todos são ativados. Ter que embrulhar cada. solteiro. botão. em um span suprimir esse aviso é desagradável.

@goyney E quanto a renderizar condicionalmente uma dica de

Sempre quero exibir uma dica de ferramenta. Que tal um suppressWarnings prop ou algo na dica de ferramenta.

Eu sempre quero exibir uma dica de ferramenta

@goyney Mesmo quando o botão está desabilitado?

Sim, foi o que eu disse. ri muito

Como mencionei acima, as dicas de ferramentas são de uso extra para os usuários quando um botão está desabilitado @oliviertassinari , a fim de indicar a eles porque um botão está desabilitado.

@ dskoda1 Eu abri # 11601.

Os elementos desativados não disparam eventos. No entanto, você pode colocar um DIV por cima do elemento e ouvir o evento disparado nesse elemento.

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

A implementação dessa sugestão é semelhante a esta e funciona.

        <Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

Isso ajuda a mostrar a dica de ferramenta sobre o botão desativado, mas o botão que está entre o 'div' perde seu estilo para mim. O que estou perdendo aqui?