Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent Tooltips on GridToolbarColumnsButton, GridToolbarFilterButton,GridToolbarDensitySelector,GridToolbarExport #11413

Closed
sterlingdcs-damian opened this issue Dec 14, 2023 · 2 comments · Fixed by #11357
Labels
component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer

Comments

@sterlingdcs-damian
Copy link

sterlingdcs-damian commented Dec 14, 2023

Steps to reproduce

Link to live example: (required)

Steps:

  1. Go to https://mui.com/x/react-data-grid/components/#toolbar
  2. Hover over columns , filters, denisty and export
  3. Filters has a show filters tooltip position at the bottom, the others have no tooltips
    image

Current behavior

Inconsistent use of MUI Datagrid toolbar butotn tooltips

Expected behavior

They either all have tooltips or none

Context

I'll have to wrap the other 3 buttons with tooltips to achieve consistency

Your environment

npx @mui/envinfo System: OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur) Binaries: Node: 20.8.0 - ~/.nvm/versions/node/v20.8.0/bin/node Yarn: Not Found npm: 10.1.0 - ~/.nvm/versions/node/v20.8.0/bin/npm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.24 @mui/core-downloads-tracker: 5.14.18 @mui/icons-material: 5.14.9 => 5.14.9 @mui/lab: 5.0.0-alpha.144 => 5.0.0-alpha.144 @mui/material: 5.14.10 => 5.14.10 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/styles: 5.14.10 => 5.14.10 @mui/system: 5.14.9 => 5.14.9 @mui/types: 7.2.9 @mui/utils: 5.14.18 @mui/x-data-grid: 6.18.1 @mui/x-data-grid-premium: 6.18.1 => 6.18.1 @mui/x-data-grid-pro: 6.18.1 @mui/x-license-pro: 6.10.2 => 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.2 => 17.0.2 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.4.3 => 4.4.3

Search keywords: DataGrid toolbar buttons

@sterlingdcs-damian sterlingdcs-damian added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 14, 2023
@sterlingdcs-damian sterlingdcs-damian changed the title Incosistent Tooltips on GridToolbarColumnsButton, GridToolbarFilterButton,GridToolbarDensitySelector,GridToolbarExport Inconsistent Tooltips on GridToolbarColumnsButton, GridToolbarFilterButton,GridToolbarDensitySelector,GridToolbarExport Dec 14, 2023
@DanailH
Copy link
Member

DanailH commented Dec 14, 2023

@sterlingdcs-damian thanks for reporting this. It's more or less a UX issue. The reason why the tooltip is there only for the Filters button is because when you have active filters the tooltip shows additional information regarding them (so that you don't have to open the filter panel to see what the active filters are). The other buttons don't have the need for that functionality.

@DanailH DanailH added component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 14, 2023
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Dec 14, 2023
@MBilalShafi
Copy link
Member

MBilalShafi commented Dec 19, 2023

We also had a related issue previously reported too, so we decided to wrap all the buttons with the Tooltip, the PR is already in review so this should be made consistent in v7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants