search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

Can we turn off tooltips on column headers in the data grid? #6227

Closed PraveenPeri closed 2 years ago

PraveenPeri commented 2 years ago

Order ID 💳

33625

Duplicates

Latest version

The problem in depth 🔍

Today, if we don't provide description in the column definition, the title is repeated as the tooltip. Not sure what's the rationale behind it but we don't see any value in that and it could rather be frustrating to some of the users. Is there a way to turn them off altogether?

Your environment 🌎

`npx @mui/envinfo` ``` System: OS: Linux 4.14 Amazon Linux 2 CPU: (4) x64 AMD EPYC 7571 Memory: 10.66 GB / 15.52 GB Container: Yes Shell: 4.2.46 - /bin/bash Binaries: Node: 16.17.0 - /usr/bin/node npm: 8.15.0 - /usr/bin/npm Managers: pip2: 18.0 - /usr/bin/pip2 pip3: 20.2.2 - /usr/bin/pip3 Yum: 3.4.3 - /usr/bin/yum Utilities: Make: 3.82 - /usr/bin/make GCC: 7.3.1 - /usr/bin/gcc Git: 2.37.1 - /usr/bin/git Virtualization: Docker: 20.10.17 - /usr/bin/docker IDEs: Emacs: 27.2 - /usr/bin/emacs Nano: 2.9.8 - /usr/bin/nano VSCode: 1.71.2 - /home/pperi@huronconsultinggroup.com/.vscode-server/bin/74b1f979648cc44d385a2286793c226e611f59e7/bin/remote-cli/code Vim: 8.2 - /usr/bin/vim Languages: Bash: 4.2.46 - /usr/bin/bash Perl: 5.16.3 - /usr/bin/perl Python: 2.7.18 - /usr/bin/python Python3: 3.7.10 - /usr/bin/python3 Databases: SQLite: 3.7.17 - /usr/bin/sqlite3 Browser: Edge ```
cherniavskii commented 2 years ago

Hey @PraveenPeri We show tooltip when the header title is overflown and therefore not fully visible. You can disable the tooltip though by setting description to an empty string. See this demo: https://codesandbox.io/s/interesting-sky-p46li7?file=/demo.tsx

PraveenPeri commented 12 months ago

@cherniavskii Sorry for revisiting this after this issue is closed. In response to your previous comment, I don't think supplying empty description string would turn off the tool tip. Because upon hover, the code is checking !description && titleRef?.current. If the description is empty, putting a ! operator in front will return true and the tooltip will pick up the header name.