[DataGrid] Wrap column menu button with a tooltip (#7890)

mui · Apr 5, 2023 · 06dcac2 · 06dcac2
1 parent decf45c
commit 06dcac2
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
@@ -47,22 +47,27 @@ export const ColumnHeaderMenuIcon = React.memo((props: ColumnHeaderMenuIconProps
 
   return (
     <div className={classes.root}>
-      <rootProps.slots.baseIconButton
-        ref={iconButtonRef}
-        tabIndex={-1}
-        className={classes.button}
-        aria-label={apiRef.current.getLocaleText('columnMenuLabel')}
+      <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('columnMenuLabel')}
-        size="small"
-        onClick={handleMenuIconClick}
-        aria-expanded={open ? 'true' : undefined}
-        aria-haspopup="true"
-        aria-controls={columnMenuId}
-        id={columnMenuButtonId}
-        {...rootProps.slotProps?.baseIconButton}
+        enterDelay={1000}
+        {...rootProps.slotProps?.baseTooltip}
       >
-        <rootProps.slots.columnMenuIcon fontSize="small" />
-      </rootProps.slots.baseIconButton>
+        <rootProps.slots.baseIconButton
+          ref={iconButtonRef}
+          tabIndex={-1}
+          className={classes.button}
+          aria-label={apiRef.current.getLocaleText('columnMenuLabel')}
+          size="small"
+          onClick={handleMenuIconClick}
+          aria-expanded={open ? 'true' : undefined}
+          aria-haspopup="true"
+          aria-controls={columnMenuId}
+          id={columnMenuButtonId}
+          {...rootProps.slotProps?.baseIconButton}
+        >
+          <rootProps.slots.columnMenuIcon fontSize="small" />
+        </rootProps.slots.baseIconButton>
+      </rootProps.slots.baseTooltip>
     </div>
   );
 });