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 prop или чего-нибудь во всплывающей подсказке.

Я всегда хочу отображать всплывающую подсказку

@goyney Даже когда кнопка отключена?

Да, это то, что я сказал. смешно

Как я упоминал выше, всплывающие подсказки особенно полезны для пользователей, когда кнопка отключена

@ 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, теряет для меня свой стиль. Что мне здесь не хватает?