Material-ui: L'info-bulle ne fonctionne pas pour<iconbutton disabled="disabled"/>

Les éléments désactivés ne déclenchent pas les événements. Vous pouvez cependant placer un DIV au-dessus de l'élément et écouter l'événement déclenché sur cet élément à la place.

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

La mise en œuvre de cette suggestion ressemble à ceci, et cela fonctionne.

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

Je pensais aussi utiliser la propriété component mais cela ne fonctionne pas à cause du style pointer-events: none; :

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

@oliviertassinari Désolé, je ne savais pas. Merci.

@bravecow Je pense que nous pouvons ajouter un avertissement si plus de personnes soulèvent ce problème.

Alors, la solution acceptée à ce problème va-t-elle être de mettre un div entre les boutons et les info-bulles? Avoir une info-bulle est généralement le plus utile sur les boutons désactivés, pour indiquer pourquoi le bouton est désactivé.

Et si nous ajoutions un accessoire au composant Tooltip qui signifiait qu'il apparaissait même lorsque l'enfant est désactivé? Cela implémenterait simplement cette solution sous le capot, mais au moins l'utilisateur ne se demanderait pas pourquoi les info-bulles ne fonctionnent pas sur les boutons désactivés.

Comment désactiver l'avertissement de l'info-bulle?

Comment désactiver l'avertissement de l'info-bulle?

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

@oliviertassinari Comment désactiver l'avertissement de l'infobulle sans encombrer le DOM?

J'ai plusieurs barres d'outils de boutons qui sont désactivés lors du chargement du contenu. Chaque bouton a une info-bulle dessus. Une fois le document chargé, ils s'activent tous. Devoir envelopper chaque. Célibataire. bouton. dans un span pour supprimer cet avertissement est odieux.

@goyney Qu'en est-il du rendu conditionnel d'une

Je veux toujours afficher une info-bulle. Que diriez-vous d'un accessoire suppressWarnings ou quelque chose sur l'info-bulle.

Je veux toujours afficher une info-bulle

@goyney Même lorsque le bouton est désactivé?

Oui, c'est ce que j'ai dit. lol

Comme je l'ai mentionné ci-dessus, les info-bulles sont d'une utilité supplémentaire pour les utilisateurs lorsqu'un bouton est désactivé @oliviertassinari , afin de leur indiquer pourquoi un bouton est désactivé.

@ dskoda1 J'ai ouvert # 11601.

Les éléments désactivés ne déclenchent pas les événements. Vous pouvez cependant placer un DIV au-dessus de l'élément et écouter l'événement déclenché sur cet élément à la place.

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

La mise en œuvre de cette suggestion ressemble à ceci, et cela fonctionne.

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

Cela aide à afficher l'info-bulle sur le bouton désactivé, mais le bouton qui est inclus dans le «div» perd son style pour moi. Qu'est-ce que j'oublie ici?