Material-ui: Tooltip doesn't work for <IconButton disabled>

[bravecow]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Tooltip is visible for hover

Current Behavior

Tooltip is hidden for hover

Steps to Reproduce (for bugs)

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

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.12 |

[oliviertassinari]

Disabled elements do not fire events. You can however place a DIV over top of the element and listen to the event fired on that element instead.

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

Implementing this suggestion looks like this, and it work.

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

[oliviertassinari]

I was also thinking of using the component property but it doesn't work because of the pointer-events: none; style:

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

[bravecow]

@oliviertassinari Sorry, didn't know. Thanks.

[oliviertassinari]

@bravecow I think that we can add a warning if more people raise this issue.

[dskoda1]

So is the accepted solution to this going to be putting a div between buttons and tooltips? Having a tooltip is typically the most helpful on disabled buttons, to indicate why the button is disabled.

What if we added a prop to the Tooltip component that signified it to appear even when the child is disabled? It would just implement this solution under the hood but at least the user wouldn't be left wondering why tooltips don't work on disabled buttons.

[goyney]

How do you turn off the tooltip warning?

[oliviertassinari]

How do you turn off the tooltip warning?

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

[goyney]

@oliviertassinari How do I turn off the tooltip warning without cluttering up the DOM?

I have several toolbars of buttons that are disabled when content is loading. Each button has a tooltip on it. Once the document loads, they all enable. Having to wrap every. single. button. in a span to suppress this warning is obnoxious.

[oliviertassinari]

@goyney What about conditionally rendering a Tooltip when needed? As far as I understand it, you don't want to display any tooltip when the button is disabled.

[goyney]

I always want to display a tooltip. How about a suppressWarnings prop or something on the tooltip.

[oliviertassinari]

I always want to display a tooltip

@goyney Even when the button is disabled?

[goyney]

Yes, that is what I said. lol

[dskoda1]

Like I mentioned above, tooltips are of extra use to users when a button is disabled @oliviertassinari, in order to indicate to them why a button is disabled.

[goyney]

@dskoda1 I have opened #11601.

[man-u-13]

Disabled elements do not fire events. You can however place a DIV over top of the element and listen to the event fired on that element instead.

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

Implementing this suggestion looks like this, and it work.

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

This helps in showing the tooltip on the disabled button but the button which is enclosed in the 'div' loses its styling for me. What am I missing here?