[Tooltip] Performance issue when lots of tooltips are used in a table

It seems like adding the <Tooltip> component in my table cells is causing some performance issues. I’ve used React Profiler to debug this and it’s pointing to Popper as taking up the most rendering time which I believe is what MUI uses for tooltips. Also, when I used the Chrome performance debugging tool I can see the blocking time is 3 times bigger when using Tooltips.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Table becomes laggy when tooltips are used.

Expected Behavior 🤔

Table remains performant when tooltips are used.

Steps to Reproduce 🕹

This isn’t an exact demo of my own use case, I just forked one of the demos, but it shows how the Tooltips slow things down when clicking on “Select all” checkbox. In my own use case the performance hit is a bit more severe as I’m filtering the table at the same time.

With tooltips: https://codesandbox.io/s/material-demo-forked-fs4zu?file=/demo.tsx:10280-10308 Without tooltips: https://codesandbox.io/s/material-demo-forked-wkdkk?file=/demo.tsx:11145-11234

Steps:

1. Click the “select all” checkbox in left top

Context 🔦

I have a table with 50 rows and 9 columns, each cell has an icon and tooltip. When I filter the table it’s very laggy but once I remove the tooltips it’s perfectly fine.

Your Environment 🌎

  System:
    OS: macOS 11.4
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/styles:  4.11.3 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^17.0.3 => 17.0.3 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    typescript: ^4.2.3 => 4.2.3 

[enoh-barbu]

The problem is that tooltip should be rendered only on mouse over/enter

I wrote for myself a wrapper component

import { useState } from 'react';
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';

export default function CustomTooltip({ children, ...rest }: TooltipProps) {
    const [renderTooltip, setRenderTooltip] = useState(false);

    return (
        <div
            onMouseEnter={() => !renderTooltip && setRenderTooltip(true)}
            className="display-contents"
        >
            {!renderTooltip && children}
            {
                renderTooltip && (
                    <Tooltip {...rest}>
                        {children}
                    </Tooltip>
                )
            }
        </div>
    );
}

[cmacdonnacha]

No problem thanks, switching to react-tooltip did the trick to be honest to we’re happy enough. Popper must be a lot heavier. We have pagination where the user can choose between 15, 30 and 50 rows and it now performs well even at 50. Thanks for taking the time 👍