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

See original GitHub issue

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:

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

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:9 (3 by maintainers)

Top GitHub Comments

2reactions

enoh-barbucommented, Dec 2, 2021

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>
    );
}

2reactions

cmacdonnachacommented, Jul 14, 2021

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 👍

Top Results From Across the Web

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

Table becomes laggy when tooltips are used. Expected Behavior. Table remains performant when tooltips are used. Steps to Reproduce. This ...

Performance issues with large # of tooltips [#2383511] | Drupal.org

I think I have found at least one source of bad performance. The problem is that the Tooltip module doesn't work correctly when...

Large number of mat-tooltip inside mat-table slows application

I found somewhere that tool-tip may impact your performance if there are large number of it. We have around 500 rows in 3...

Tooltips: How to create and use the mighty UI pattern - Appcues

Successful tooltip usage improves the user journey while increasing the likelihood that a user will adopt your product and its features. However, a...

Why Tooltips are Terrible and How to Better Design Them

Bad tooltip design presents tooltips as redundant and distracting, making them lose all credibility among users. · What else gives tooltips a bad...