We have this same problem with every operator. In the tooltip, we display the value as it is, without any formatting. Another example is the date operator which doesn't format the value to the user's locale. The date should be displayed as dd/mm/YYYY to me.

I propose to add a function to GridFilterOperator to format the value of the filter item to another string which it's safe to be displayed in the UI.

diff --git a/packages/grid/x-data-grid/src/models/gridFilterOperator.ts b/packages/grid/x-data-grid/src/models/gridFilterOperator.ts
index 5fc3586d8..ccc50308c 100644
--- a/packages/grid/x-data-grid/src/models/gridFilterOperator.ts
+++ b/packages/grid/x-data-grid/src/models/gridFilterOperator.ts
@@ -42,4 +42,10 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
    * The props to pass to the input component in the filter panel for this filter operator.
    */
   InputComponentProps?: Record<string, any>;
+  /**
+   * Converts the value of a filter item to a human-readable form.
+   * @param {GridFilterItem['value']} value The filter item value.
+   * @returns {string} The value formatted to be displayed in the UI.
+   */
+  getValueAsString?: (value: GridFilterItem['value']) => string;
 }

Then, in the filter button, we call it if it's available:

diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 3206f2833..ef0dde140 100644
--- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -76,6 +76,13 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           .getLocaleText(`filterOperator${capitalize(item.operatorValue!)}` as GridTranslationKeys)!
           .toString();
 
+      const getFilterItemValue = (item: GridFilterItem): string => {
+        const { getValueAsString } = lookup[item.columnField!].filterOperators!.find(
+          (operator) => operator.value === item.operatorValue,
+        )!;
+        return getValueAsString ? getValueAsString(item.value) : item.value;
+      };
+
       return (
         <div>
           {apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length)}
@@ -85,7 +92,7 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
                 <li key={index}>
                   {`${lookup[item.columnField!].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`}
+                  ${getFilterItemValue(item)}`}
                 </li>
               )),
             }))}

Is there any way how to read tooltip of labels instead of values or disable tooltip info?

You can disable the tooltip by providing a custom filter button. Here's an example: https://codesandbox.io/s/customtoolbargrid-demo-mui-x-forked-miy29h?file=/demo.tsx

Hi all!

I was about to create an issue but found this one while looking for duplicates.
@m4theushw, do you know when this will be available?

Cheers!

I have the same problem in DataGridPremium.

Hi all!

With PR #6956 merged, to customize the value displayed I have to do something like this:

filterOperators: getGridSingleSelectOperators().map((operator) => {
  return {
    ...operator,
    getValueAsString: (value) => {
      // Handle anyOf operator
      if (Array.isArray(value)) {
        return value.map((v) => getStatusLabel(v)).join(', ')
      }
      return getStatusLabel(value)
    },
  }
}),

I think this is an overcomplicated solution because, in most use cases, the users want to see the same label of the selected options in the filter tooltip. Wouldn't it be better, for singleSelect type, to just display the label on the filter tooltip as the default behavior to avoid this boilerplate code?
In my opinion, it doesn't make sense, for singleSelect, that in the options we see the label of the option

but in the tooltip, we see the value of the option
.

Let me know what you all think! :)

Hello, @TiagoPortfolio. I faced the same problem and see the followings solution options:

1. Call getValueAsString here with something like value.map((v) => valueOptionsMap.get(v).label).join(', ') by default for multiselect/singleselect.

2. (it's still difficult but can be controlled) Another option is changing getValueAsString signature (packages/grid/x-data-grid/src/models/gridFilterOperator.ts#L46) from GridFilterItem['value'] to GridFilterItem. Then, for example, for a multiselect, the following variant will be possible:

       const getValueAsString = ({value, columnField}) => {
         //  Columns can be taken from arguments of getGridSelectOperators wrapper or context.
         const valueOptions = columns.reduce((acc, prev) => {
           if (prev.field === columnField && prev.valueOptions !== undefined) {
             acc.push(prev.valueOptions);
             return acc;
           }
           return acc;
         }, []);

         const valueOptionsMap = new Map<string, Exclude<ValueOptions, string | number>>(
           valueOptions.flat().map((item) => [item.value, item])
         );

         return value.map((v) => valueOptionsMap.get(v).label).join(', ');
       },

       const gridClientMultiSelectOperators: GridFilterOperator[] = [
         {
             label: t('contains'),
             value: 'contains',
             getValueAsString,
         },
         {
             label: t('not contains'),
             value: 'not contains',
             getValueAsString,
         }
         ...
       ]
       ...

I hope @m4theushw could help us.

is there any update to this issue?

Any futher update to this?

Bump.

Hi, folks!

End-users and developers are most likely expecting the label to appear in the tooltip, so I'll modify the getValueAsString function to use label instead of value for the singleSelect type.

However, given the function name getValueAsString, I'm not entirely sure if passing label is the best approach.

Please check the details in the PR.