MUI Tooltip overflow problem

<p>If you're encountering an inexplicable overflow issue with the <code>Tooltip</code> component in Material-UI on hover, here's a solution that might help.</p>
<p>First, make sure you have popper.js installed using the following command:</p>

npm install --save-dev @types/popper.js
Next, in the component containing <code>Tooltip</code>, add the following imports:
import { OptionsGeneric } from '@popperjs/core';
Then, update your <code>Tooltip</code> usage as follows:
  title={'Some text'}
    disablePortal: true,
    popperOptions: {
      modifiers: [
          name: 'preventOverflow',
          options: {
            enabled: true,
            boundariesElement: 'window',
      ] as OptionsGeneric<any>['modifiers'],
  aria-label='Some text'
  {/* ... your content ... */}
<p>This configuration adds Popper options to handle overflow.</p>

Cosmin Doboș
13 Feb 2024
« Back to post