Tooltip doesn't work for <IconButton disabled>

[korywka]

• 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>

[korywka]

@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.

[mririgoyen]

How do you turn off the tooltip warning?

[oliviertassinari]

How do you turn off the tooltip warning?

@goyney #8416 (comment)