Material-ui: ツールチップが機能しない<iconbutton disabled="disabled"/>

無効にされた要素はイベントを発生させません。 ただし、要素の上にDIVを配置し、代わりにその要素で発生したイベントをリッスンすることができます。

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

この提案の実装は次のようになり、機能します。

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

componentプロパティを使用することも考えていましたが、 pointer-events: none;スタイルのために機能しません。

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

@oliviertassinari申し訳ありませんが、知りませんでした。 ありがとう。

@bravecowより多くの人がこの問題を提起した場合、警告を追加できると思います。

それで、これに対する受け入れられた解決策は、ボタンとツールチップの間にdivを置くことになるのでしょうか？ ボタンが無効になっている理由を示す

Tooltipコンポーネントに、子が無効になっている場合でも表示されることを示す小道具を追加した場合はどうなりますか？ このソリューションを内部で実装するだけですが、少なくともユーザーは、ツールチップが無効なボタンで機能しない理由を不思議に思うことはありません。

ツールチップの警告をオフにするにはどうすればよいですか？

ツールチップの警告をオフにするにはどうすればよいですか？

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

@oliviertassinari DOMを乱雑にすることなく、ツールチップの警告をオフにするにはどうすればよいですか？

コンテンツの読み込み時に無効になるボタンのツールバーがいくつかあります。 各ボタンにはツールチップがあります。 ドキュメントが読み込まれると、すべて有効になります。 すべてをラップする必要があります。 シングル。 ボタン。 この警告を抑制するためにspan行うのは不快です。

@goyney必要に応じてツールチップを条件付きでレンダリングするのはどうですか？ 私が理解している限り、ボタンが無効になっているときにツールチップを表示したくありません。

いつもツールチップを表示したいです。 suppressWarnings小道具かツールチップの何かはどうですか。

いつもツールチップを表示したい

@goyneyボタンが無効になっていても？

はい、それは私が言ったことです。 笑

上で述べたように、ツールチップは、ボタンが無効になっている理由をユーザーに示すために、 @ oliviertassinariでボタンが無効になっている場合にユーザーにとって

@ dskoda1 ＃11601を開きました。

無効にされた要素はイベントを発生させません。 ただし、要素の上にDIVを配置し、代わりにその要素で発生したイベントをリッスンすることができます。

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

この提案の実装は次のようになり、機能します。

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

これは、無効になっているボタンにツールチップを表示するのに役立ちますが、「div」で囲まれているボタンはスタイルを失います。 ここで何が欠けていますか？