Material-ui: Tooltip funktioniert nicht für<iconbutton disabled="disabled"/>

Deaktivierte Elemente lösen keine Ereignisse aus. Sie können jedoch einen DIV über dem Element platzieren und stattdessen das auf dieses Element ausgelöste Ereignis abhören.

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

Die Implementierung dieses Vorschlags sieht folgendermaßen aus und funktioniert.

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

Ich habe auch darüber nachgedacht, die Eigenschaft component aber sie funktioniert aufgrund des Stils pointer-events: none; :

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

@oliviertassinari Sorry, wusste nicht. Vielen Dank.

@bravecow Ich denke, wir können eine Warnung hinzufügen, wenn mehr Leute dieses Problem

Wird die akzeptierte Lösung hierfür ein Div zwischen Schaltflächen und QuickInfos setzen? Ein Tooltip ist normalerweise bei deaktivierten Schaltflächen am hilfreichsten, um anzugeben, warum die Schaltfläche deaktiviert ist.

Was wäre, wenn wir der Komponente Tooltip eine Requisite hinzufügen würden, die anzeigt, dass sie auch dann angezeigt wird, wenn das Kind deaktiviert ist? Diese Lösung würde nur unter der Haube implementiert, aber zumindest würde sich der Benutzer nicht fragen, warum Tooltips bei deaktivierten Schaltflächen nicht funktionieren.

Wie schalten Sie die Tooltip-Warnung aus?

Wie schalten Sie die Tooltip-Warnung aus?

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

@oliviertassinari Wie überladen ?

Ich habe mehrere Symbolleisten mit Schaltflächen, die beim Laden von Inhalten deaktiviert sind. Auf jeder Schaltfläche befindet sich ein Tooltip. Sobald das Dokument geladen ist, werden alle aktiviert. Jeden einpacken müssen. Single. Taste. in einem span , um diese Warnung zu unterdrücken, ist widerlich.

@goyney Was ist mit dem bedingten Rendern eines Tooltips bei Bedarf? Soweit ich weiß, möchten Sie keinen Tooltip anzeigen, wenn die Schaltfläche deaktiviert ist.

Ich möchte immer einen Tooltip anzeigen. Wie wäre es mit einer suppressWarnings Requisite oder etwas auf dem Tooltip?

Ich möchte immer einen Tooltip anzeigen

@goyney Auch wenn die Schaltfläche deaktiviert ist?

Ja, das habe ich gesagt. lol

Wie oben erwähnt, sind Tooltips für Benutzer von besonderem Nutzen, wenn eine Schaltfläche deaktiviert ist @oliviertassinari , um ihnen anzuzeigen, warum eine Schaltfläche deaktiviert ist.

@ dskoda1 Ich habe # 11601 geöffnet.

Deaktivierte Elemente lösen keine Ereignisse aus. Sie können jedoch einen DIV über dem Element platzieren und stattdessen das auf dieses Element ausgelöste Ereignis abhören.

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

Die Implementierung dieses Vorschlags sieht folgendermaßen aus und funktioniert.

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

Dies hilft beim Anzeigen des Tooltips auf der deaktivierten Schaltfläche, aber die Schaltfläche, die im 'div' enthalten ist, verliert für mich ihr Styling. Was vermisse ich hier?