Today I Learned

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:

<Tooltip
  title={'Some text'}
  PopperProps={{
    disablePortal: true,
    popperOptions: {
      modifiers: [
        {
          name: 'preventOverflow',
          options: {
            enabled: true,
            boundariesElement: 'window',
          },
        },
      ] as OptionsGeneric<any>['modifiers'],
    },
  }}
  aria-label='Some text'
>
  {/* ... your content ... */}
</Tooltip>

This configuration adds Popper options to handle overflow.