[IconButton] Issues with IconButtons with both disabled and tooltip props

[m14t]

Problem description

The tooltip of an <IconButton> is sporadic when the button is disabled.

Steps to reproduce

1. Render the following component

    import IconButton from 'material-ui/IconButton';
    import ReorderIcon from 'material-ui/svg-icons/action/reorder';

    const disabledReorderAction = (
      <IconButton
        disabled
        tooltip="Re-ordering is disabled while filtering"
      >
        <ReorderIcon />
      </IconButton>
    );

1. View the component and approach the ReorderIcon from the bottom. Notice that the tooltip is not displayed.
2. Now approach the ReorderIcon from other directions. Notice that it is somewhat sporadic when the tooltip is displayed or not.

Versions

• Material-UI: v0.15.4
• React: 15.3.2
• Browser: Chrome 53.0.2785.116 (64-bit) - macOS 10.11.6

[m14t]

The more I think about this, it might make sense for IconButton to always display the tooltip if it is provided, whether it is disabled or not. This would let the Application developer decide if/when they want a tooltip.

In my use-case, I actually only want a tooltip when the button is disabled, to explain why that is the case.

I'd be more than happy to work on a Pull-Request for this, but I would consider this a breaking change (since people with disabled buttons that were expecting their tooltips to be hidden, would start seeing them), and didn't want to start on this if it was not something you agreed with/wanted.

[adamtal3]

Looking at the code, you might think the tooltip should be displayed.

The problem is that disabled elements won't fire events.

Fixing this will probably require faking the disabled status of the button (will it break the element's accessibility?) by coloring it as disabled, showing the disabled cursor and ignoring TouchTap / Click / Hover events.

Do you think it's possible to do such a thing?

[jschlieber]

This is still an issue for me. Tooltips don't show for disabled Icon Buttons in chrome and when hovering over a neighboring Icon Button its tooltip won't show either, although that Button might be enabled.

Versions

• Material-UI: 0.18.1
• React: 15.4.1
• Chromium: Version 58.0.3029.110 Built on Ubuntu , running on LinuxMint 17.1 (64-bit)

[oliviertassinari]

Closing for #2230