Material-ui: La información sobre herramientas no funciona para<iconbutton disabled="disabled"/>

Los elementos deshabilitados no disparan eventos. Sin embargo, puede colocar un DIV sobre el elemento y escuchar el evento disparado en ese elemento.

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

La implementación de esta sugerencia se ve así y funciona.

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

También estaba pensando en usar la propiedad component pero no funciona debido al estilo pointer-events: none; :

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

@oliviertassinari Lo siento, no sabía. Gracias.

@bravecow Creo que podemos agregar una advertencia si más personas plantean este problema.

Entonces, ¿la solución aceptada para esto será poner un div entre los botones y la información sobre herramientas? Tener una información sobre herramientas suele ser lo más útil en los botones deshabilitados, para indicar por qué el botón está deshabilitado.

¿Qué pasa si agregamos un accesorio al componente Tooltip que significa que aparece incluso cuando el niño está discapacitado? Simplemente implementaría esta solución bajo el capó, pero al menos el usuario no se quedaría preguntándose por qué la información sobre herramientas no funciona en los botones deshabilitados.

¿Cómo se desactiva la advertencia de información sobre herramientas?

¿Cómo se desactiva la advertencia de información sobre herramientas?

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

@oliviertassinari ¿Cómo desactivo la advertencia de información sobre herramientas sin saturar el DOM?

Tengo varias barras de herramientas de botones que se desactivan cuando se carga el contenido. Cada botón tiene una información sobre herramientas. Una vez que se carga el documento, todos se habilitan. Tener que envolver todos. soltero. botón. en un span para suprimir esta advertencia es desagradable.

@goyney ¿Qué pasa con la representación condicional de una información sobre herramientas cuando sea necesario? Por lo que tengo entendido, no desea mostrar información sobre herramientas cuando el botón está desactivado.

Siempre quiero mostrar información sobre herramientas. ¿Qué tal un suppressWarnings prop o algo en la información sobre herramientas?

Siempre quiero mostrar información sobre herramientas

@goyney ¿ Incluso cuando el botón está desactivado?

Sí, eso es lo que dije. jajaja

Como mencioné anteriormente, la información sobre herramientas es de mayor utilidad para los usuarios cuando un botón está deshabilitado @oliviertassinari , para indicarles por qué un botón está deshabilitado.

@ dskoda1 He abierto # 11601.

Los elementos deshabilitados no disparan eventos. Sin embargo, puede colocar un DIV sobre el elemento y escuchar el evento disparado en ese elemento.

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

La implementación de esta sugerencia se ve así y funciona.

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

Esto ayuda a mostrar la información sobre herramientas en el botón deshabilitado, pero el botón que está encerrado en el 'div' pierde su estilo para mí. ¿Que me estoy perdiendo aqui?