<p dir="auto">Tooltip container visible all the time, rather than just when necessary, meaning it get in the way of other elements, e.g. buttons.</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 entire tooltip element should not be rendered until I hover over the tooltip activation element.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The tooltip element is rendered all the time, taking up space with a high z-index. When the element is on top of buttons it makes it so you cannot click that area of the button.<br>
The tooltip itself is not visible until I hover over the correct element, but the empty container is always there.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Implement tooltip</li>
<li>Add button in area where tooltip is rendered</li>
<li>Try and click on button when tooltip is hidden (it should be unclickable)</li>
<li>Alternatively, just inspect element with tooltip, and you will see the container element on top of the page when you hover over it.</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>1.0.0-beta.11</td>
</tr>
<tr>
<td>React</td>
<td>15.5.3</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60</td>
</tr>
</tbody>
</table>
<p dir="auto">I know you guys are discussing how to manage theming and CSS going forward. There's React Toolbox which is using CSS Modules, but I went with Material UI because of the more extensive list of components, and I'm not sure about the future of CSS Modules just yet. I tend to watch and see what Facebook officially endorses since, you know, they're the creators of React. ;)</p>
<p dir="auto">Have you guys looked at <a href="https://www.npmjs.com/package/radium" rel="nofollow">Radium</a> though, as a potential stopgap solution? I'm using it in a project of mine, and it's excellent. It can even handle things you can't do with inline styles such as duplicate keys (<code class="notranslate">display: flex; display: -webkit-flex</code>) and pseudo-classes/elements. It even automatically handles vendor prefixes automatically, so with Radium, you can just use an inline style such as <code class="notranslate">{display: 'flex', flex: 1}</code> and it will handle that for you.</p>