Today I Learned

MUI Tooltip overflow problem

If you're encountering an inexplicable overflow issue with the Tooltip component in Material-UI on hover, here's a solution that might help.

First, make sure you have popper.js installed using the following command:

npm install --save-dev @types/popper.js

Next, in the component containing Tooltip, add the following imports:

import { OptionsGeneric } from '@popperjs/core';

Then, update your Tooltip 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 ... */}

This configuration adds Popper options to handle overflow.