title: Material-UI Tooltip zIndex over MenuItem in Select component
body: <p>My problem is simple, I have a <code>&lt;Tooltip&gt;</code> component surrounding a <code>&lt;Select&gt;</code> component and when I click the Select, the tooltip shows over the MenuItems like so:</p>
  
  <p>Normal behavour:</p>
  
  <p><a href="https://i.stack.imgur.com/VOVmf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOVmf.png" alt="Tooltip without MenuItem"></a></p>
  
  <p>Not so normal behaviour:</p>
  
  <p><a href="https://i.stack.imgur.com/yGEPk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yGEPk.png" alt="Tooltip over MenuItem"></a></p>
  
  <p>So I left all of the default values for Material-UI and for the Tooltip it's: <code>zIndex: 1500</code> but there is none for the MenuItem from what I've seen. I tried to set the zIndex of MenuItem to 1501 but it still has the same behaviour.</p>
  
  <p>I was wondering what's the clean way to either leave the tooltip behind the MenuItem and if that's not possible then to just hide the tooltip when the Select MenuItems are opened...</p>
  
  <p>Here's what my code looks like:</p>
  
  <pre><code>&lt;Tooltip title={'Filter by status'}&gt;
      &lt;Select value={this.state.status} onChange={this.handleChange.bind(this, Filter.Status)}&gt;
          {statuses.sort(this.filterItemSortFn).map(item =&gt; {
              return (&lt;MenuItem style={{zIndex: 1501}} value={item}&gt;{item}&lt;/MenuItem&gt;);
          })}
      &lt;/Select&gt;
  &lt;/Tooltip&gt;
  </code></pre>
  
  <p>If I set the zIndex of the tooltip to a smaller value and it hides behind the menuItems, but I don't really wanna play with the default values, since it also interferes with other zIndex values.</p>
  
  <p>I made a CodeSandbox: <a href="https://codesandbox.io/s/rn68z4xlo" rel="nofollow noreferrer">https://codesandbox.io/s/rn68z4xlo</a></p>