title: Material-UI - Tooltip on Select/MenuItem component stays displayed after selection
body: <p>I'm using Material-UI's Select component with a Tooltip surrounding it, like so:</p>
  
  <pre><code>&lt;Tooltip title="Tooltip Test"&gt;
    &lt;Select value={this.state.age} onChange={this.handleChange}
      inputProps={{ name: "age", id: "age-simple" }}
    &gt;
      &lt;MenuItem value=""&gt;
        &lt;em&gt;None&lt;/em&gt;
      &lt;/MenuItem&gt;
      &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
      &lt;MenuItem value={20}&gt;...&lt;/MenuItem&gt;
    &lt;/Select&gt;
  &lt;/Tooltip&gt;
  </code></pre>
  
  <p>My problem is that when I click the Select component, the Tooltip stays displayed, during the use of the Select, and even after an item was selected.</p>
  
  <p>I want it to disappear as soon as the Select is clicked so that it doesn't stay over the MenuItems (Changing the zIndex is not the solution I want) and also still is not displayed even after selecting an item in the menu.</p>
  
  <p>I made a codesandbox with the simple issue I have: <a href="https://codesandbox.io/s/yvloqr5qoj" rel="nofollow noreferrer">https://codesandbox.io/s/yvloqr5qoj</a></p>
  
  <p>But I am using typescript and this is the actual code I'm working with:</p>
  
  <h3>ControlledTooltip</h3>
  
  <pre><code>import * as React from 'react';
  import PropTypes from 'prop-types';
  
  import withStyles, { WithStyles } from 'material-ui/styles/withStyles';
  import { Tooltip } from 'material-ui';
  
  const styles = {
  
  }
  
  type State = {
      open: boolean,
  };
  
  type Props = {
      id: string,
      msg: string,
      children: PropTypes.node,
  };
  
  
  class ControlledTooltip extends React.PureComponent&lt;Props &amp; WithStyles&lt;keyof typeof styles&gt;, State&gt; {
  
      constructor(props) {
          super(props);
  
          this.state = {
              open: false,
          };
      }
  
      private handleTooltipClose(): void {
          this.setState({ open: false });
      }
  
      private handleTooltipOpen(): void {
          this.setState({ open: true });
      }
  
      render() {
          const { id, msg, children } = this.props;
          const { open } = this.state;
  
          return(
              &lt;div&gt;
                  &lt;Tooltip id={id}
                      title={msg}
                      open={open}
                      onClose={this.handleTooltipClose}
                      onOpen={this.handleTooltipOpen}
                  &gt;
                      {children ? children : null}
                  &lt;/Tooltip&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default withStyles(styles)(ControlledTooltip);
  </code></pre>
  
  <h3>Component using the Tooltip</h3>
  
  <pre><code>&lt;ControlledTooltip msg={'Filter'}&gt;
      &lt;Select value={this.state.type} onChange={this.handleChange.bind(this, Filter.Type)}&gt;
          {this.docTypeFilters.map(item =&gt; {
              return (&lt;MenuItem key={item} value={item}&gt;{item}&lt;/MenuItem&gt;);
          })}
      &lt;/Select&gt;
  &lt;/ControlledTooltip&gt;
  </code></pre>