Repository: mui/material-ui (TypeScript)
Date: 2018-10-07 18:10:13+00:00
Task type: Bug Fix

Issue:
Tooltip inside CardActions raises Warning: Failed prop type
<!--- Provide a general summary of the issue in the Title above -->
Titled case raises Warning: Failed prop type: The following properties are not supported: `className`. Please remove them. The issue started to appear after recent reimplementation of `Tooltip` component. Is it a desired behaviour? Might be connected with #12159 
<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is a v1.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior
It should be possible to use Tooltip inside CardAction without above warning.

## Current Behavior
```js         
         <CardActions>
            <Tooltip title="second tooltip">
              <Typography>Second text</Typography>
            </Tooltip>
          </CardActions>
```
causes above warning
<!---
    Describe what happens instead of the expected behavior.
-->

## Steps to Reproduce
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).

    This codesandbox.io template _may_ be a good starting point:
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app


    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->
Link: https://codesandbox.io/s/4j3oklzzyw

1. Just load above example and see warning in the console.

## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  | v1.4.1  |
| React        |   v16.4.1     |
| browser      |   any      |


Issue discussion:
I'm experiencing the same issue inside of a FormGroup.
I've been experiencing the same issue inside a ListItemIcon. 
Wrap your Tooltip inside a React.Fragment and the warning doesn't show up anymore.
```javascript
<ListItem>
 <ListItemIcon>
    <React.Fragment>
      <Tooltip placement="top" title="Hello !">
        <Icon>done</Icon>
      </Tooltip>
    </React.Fragment>
  </ListItemIcon>
</ListItem>
```
I resolved my issue. I was placing the prop in question on the Tooltip. I'm not having any issues on the FormGroup.
I have been exploring the scope of the possible solution. I think that the simplest one is to make the Tooltip transparent. Basically, we can remove:
https://github.com/mui-org/material-ui/blob/6245aae2dc0a34624993d094d56a2db9445dd754/packages/material-ui/src/Tooltip/Tooltip.js#L456
and forward the properties to the children:
https://github.com/mui-org/material-ui/blob/6245aae2dc0a34624993d094d56a2db9445dd754/packages/material-ui/src/Tooltip/Tooltip.js#L320

Anyone wants to work on it?
any news on this one?
@flaviogrossi Do you want to lead the effort? 
> @flaviogrossi Do you want to lead the effort?

i would, but i'm not familiar enough with the codebase.

Also, i've seen related bug reports which could be affected by this change and i'm not sure to be able to test every one of them.
It's should be about following https://github.com/mui-org/material-ui/issues/12302#issuecomment-423847047. The core contributors are here to make sure it's good. 

Solution patch:
diff --git a/.size-limit.js b/.size-limit.js
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of all the material-ui modules.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '93.1 KB',
+    limit: '93.2 KB',
   },
   {
     name: 'The main docs bundle',
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import RootRef from '../RootRef';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
-import exactProp from '../utils/exactProp';
 import Grow from '../Grow';
 import Popper from '../Popper';
 
@@ -254,7 +253,11 @@ class Tooltip extends React.Component {
       disableFocusListener,
       disableHoverListener,
       disableTouchListener,
+      enterDelay,
+      enterTouchDelay,
       id,
+      leaveDelay,
+      leaveTouchDelay,
       open: openProp,
       placement,
       PopperProps,
@@ -262,6 +265,7 @@ class Tooltip extends React.Component {
       title,
       TransitionComponent,
       TransitionProps,
+      ...other
     } = this.props;
 
     let open = this.isControlled ? openProp : this.state.open;
@@ -274,6 +278,7 @@ class Tooltip extends React.Component {
     const childrenProps = {
       'aria-describedby': open ? id || this.defaultId : null,
       title: !open && typeof title === 'string' ? title : null,
+      ...other,
     };
 
     if (!disableTouchListener) {
@@ -437,8 +442,6 @@ Tooltip.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-Tooltip.propTypes = exactProp(Tooltip.propTypes);
-
 Tooltip.defaultProps = {
   disableFocusListener: false,
   disableHoverListener: false,


Test patch:
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -233,4 +233,13 @@ describe('<Tooltip />', () => {
       );
     });
   });
+
+  it('should forward properties to the child element', () => {
+    const wrapper = shallow(
+      <Tooltip className="foo" {...defaultProps}>
+        <h1>H1</h1>
+      </Tooltip>,
+    );
+    assert.strictEqual(wrapper.find('h1').props().className, 'foo');
+  });
 });