<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">When Dialog closes, Tooltip should not appear again.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Tooltip appears again, need to have a click somewhere to let it disappears.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Wrap a Button that will open a Dialog on click with a Tooltip</li>
<li>Hover on the Button, Tooltip appears</li>
<li>Click on the Button, Tooltip disappears, Dialog opens.</li>
<li>Close Dialog, Tooltip appears again. Need to have another click to let it disappears</li>
<li><a href="https://codesandbox.io/s/7k0xp95o0j" rel="nofollow">https://codesandbox.io/s/7k0xp95o0j</a></li>
</ol>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome Canary 64.0.3265.0</td>
</tr>
</tbody>
</table>
<p dir="auto">I have a RaisedButton I am trying to label with a KaTeX rendered span.  The content of the label is hidden behind the button and the button is clickable far underneath the button.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">The button should render with the label visible and only be clickable over the actual button.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Here is a screenshot of what I am seeing:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8697597/31289888-7e671358-aa98-11e7-8c52-c38b45eb63dc.png"><img src="https://user-images.githubusercontent.com/8697597/31289888-7e671358-aa98-11e7-8c52-c38b45eb63dc.png" alt="screen shot 2017-10-06 at 1 12 43 pm" style="max-width: 100%;"></a><br>
The label can be seen hiding behind the button.  This also occurs on buttons with no overflow, but then it just looks like a blue button...</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Here is a codesandbox.io: <a href="https://codesandbox.io/s/92484n34z4" rel="nofollow">https://codesandbox.io/s/92484n34z4</a></p>
<ol dir="auto">
<li>Create a RaisedButton with some katex in the label</li>
<li>Hover over the space beneath the button and notice that it is clickable</li>
<li>Notice the label is not visible</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I am trying to render a series of several buttons with possible responses to a math problem prompt.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.3</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>katex</td>
<td>0.8.3</td>
</tr>
</tbody>
</table>