[data grid] When wrapping custom renderHeader components in a Tooltip, it alway shows on hover, still appearing when there is no ellipsis

[jewseppi]

Steps to reproduce

Link to live example: (required)

Steps:

1. create a custom textfield input for the renderHeader param wrapped in an mui tooltip
2. ensure there is no ellipsis on the textbox content
3. hover over header, tooltip will appear.

Current behavior

tooltip appears

Expected behavior

tooltip should not appear (unless the text input is overflowing and has an ellipsis)

Context

No response

Your environment

npx @mui/envinfo

  Chrome 125.0.6422.142 (Official Build) (64-bit)
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\DevOps\RetailServices.Web\retailservices.web.management\node_modules\.bin\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (125.0.2535.85)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.4
    @emotion/styled: ^11.10.6 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.17
    @mui/envinfo: ^2.0.19 => 2.0.19
    @mui/icons-material: ^5.14.3 => 5.15.17
    @mui/material: ^5.14.5 => 5.15.17
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  5.17.26
    @mui/x-data-grid-pro: ^5.17.26 => 5.17.26
    @mui/x-date-pickers: ^5.0.19 => 5.0.20
    @mui/x-date-pickers-pro: ^5.0.19 => 5.0.20
    @mui/x-license-pro: ^5.17.2 => 5.17.12
    @types/react: ^18.0.28 => 18.3.1
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: ^4.9.5 => 4.9.5

Search keywords: renderHeader does not apply tooltip to custom header elements
Order ID: 73076

[michelengelen]

yes, that is expected behavior.
We do have some excessive logic on this topic to only show a tooltip when there is an ellipsis in place. If you want to mimic this behavior you would need to add similar logic to control it.

[jewseppi]

that's too bad, it would be great if we could just enable that logic on the field.

[michelengelen]

that's too bad, it would be great if we could just enable that logic on the field.

That would not work.
Think of the custom render header as a standalone component.

What you can do is listening on the events columnHeaderOver, columnHeaderOut, columnHeaderEnter or columnHeaderLeave to trigger your custom Tooltip.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.