title: Place MaterialUI Tooltip "on top" of anchor element? (React)
body: <h3>Seems impossible to place <code>&lt;Tooltip&gt;</code> "on top" (stacked/layered above) the triggering anchor element.</h3>
  
  <p>It always appears outside the parent, using <code>"placement"</code> to decide where. I believe it's the <strong>Flip</strong> tool within Popper that manages placement and ensures visibility. I've tried passing Popper option modifiers to disable flip, and adjusting the offset. Some recommendations were to skip preventing overflow, and disable GPU acceleration. <em>I'm down a rabbit-hole of MaterialUI internals to accomplish this.</em> I commented out what seems like unlikely overkill solutions.</p>
  
  <p><strong>Example outside MUI: <a href="https://www.npmjs.com/package/react-tooltip" rel="nofollow noreferrer">react-tooltip</a></strong>
  <em>(includes pointer tracking, beyond this question).</em></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Tooltip title="My Label" placement="top" PopperProps={{
    popperOptions: {
      modifiers: {
        flip: { enabled: false },
        // computeStyle: {
        //   gpuAcceleration: false
        // },
        // preventOverflow: {
        //   enabled: false,
        //   padding: 0
        // },
        offset: {
          offset: '-20px -20px'
        }
      }
    }
  }}&gt;&lt;/Tooltip&gt;
      &lt;h3&gt;My Text&lt;/h3&gt;
  &lt;/Tooltip&gt;
  </code></pre>