<h3 dir="auto">Problem description</h3>
<p dir="auto">When I use <code class="notranslate">onMouseEnter</code> and <code class="notranslate">onMouseLeave</code> to show a popup (tooltip behavior), the popup does not appear.</p>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto"><a href="https://codesandbox.io/s/wpjvm86AM" rel="nofollow">https://codesandbox.io/s/wpjvm86AM</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.18.2</li>
<li>React: 15.5.3</li>
<li>Browser: N/A</li>
</ul>
<p dir="auto">I suspect the issue is that when the popup is open it adds an overlay to the screen, so that the button is no longer on top, resulting in immediate <code class="notranslate">onMouseLeave</code>.</p>
<p dir="auto">Is there a way to overcome this? I thought that maybe setting a different <code class="notranslate">zIndex</code> to the popup might fix this, but I'm not sure.</p>
<p dir="auto">Hi there,<br>
According to your description of AppBar: "App bars are a collection of components placed as a static header for an application", I was thinking that the AppBar wouldn't scroll off the page when you put a long list below it, let's say.  But it does.  See this example if you'd like: <a href="http://www.donwoodlock.com/TextDon/index.html" rel="nofollow">http://www.donwoodlock.com/TextDon/index.html</a></p>
<p dir="auto">Is there a property I should set to keep it fixed on top?  Or a particular wrapper I should use for everything else to create a designated scrolling area?</p>
<p dir="auto">Please advise.  Thx.<br>
Don</p>