Material-ui: Tooltip wrapped toggle buttons break highlight

[joziahg]

For, ToggleButtons wrapped in a tooltip, the toggle highlight doesn't work.

I believe this may be similar to #13206

• [ x] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Tooltips break toggle buttons highlighting behavior.

Expected Behavior 🤔

I expect Tooltips to not affect highlighting behavior.

Steps to Reproduce 🕹

https://codesandbox.io/s/lingering-bird-6zrc4?fontsize=14

Context 🔦

I wanted to put a tooltip on the buttons so users know what the buttons do.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.5.2 |
| React | 16.11.0 |
| Browser | firefox 69 |
| TypeScript | n/a |

[oliviertassinari]

We have covered this problem a couple of times already. They are 3 possible approaches, 2 you can leverage today.

1. Forward the prop to the write element (use a "prop catcher")
2. Apply the tooltip to the label:

      <ToggleButtonGroup
        value={mode}
        exclusive
        onChange={(e, newValue) => setMode(newValue)}
      >
        <ToggleButton value="kill">
          <Tooltip title="Set mode to kill">
            <span>Kill</span>
          </Tooltip>
        </ToggleButton>

1. For Material-UI to avoid the cloneElement API: #12921.

[oliviertassinari]

@joziahg Yes, I think that the issue you have linked is related, please upvote #12921 if you would like the radio group's solution generalized.

[pavel-klavik]

1. Forward the prop to the write element (use a "prop catcher")

Could you give me a link with some code doing this? I would like to adapt this into our codebase.