How to change column head mouse-over content

[mcadotsch]

How can i change the default content of the mouse-over textbox (tooltip) in the column header?

[KevinVandy]

The title is just set to the header value on a column definition for accessibility reasons when the header gets cut off. You could add your own <Tooltip> around a header in the Header custom render if you want.

https://www.material-react-table.com/docs/guides/data-columns#custom-header-render

[mcadotsch]

Thnx! That did the trick.

[jjwallaby]

Hi,
I tried this... But seems there is still a default ToolTip occurring which displays a second tooltip with the name of the column field.

columns modified :-

  {
    accessorKey: 'email',
    header: 'Email',
    title: 'this is the main title',
    Header: ({ column }) => (
      <Tooltip title={"this is override title of the Column Field. However  it seems that there is a second tooltip enable"}>
      <i style={{ color: 'red' }}>{column.columnDef.header}</i>

), muiEditTextFieldProps: { type: 'email',

      required: true,
      error: !!validationErrors?.email,
      helperText: validationErrors?.email,
      //remove any previous validation errors when user focuses on the input
      onFocus: () =>
        setValidationErrors({
          ...validationErrors,
          email: undefined,
        }),
    },

"material-react-table": "^2.8.0",