[DataGrid] Align grid cell tooltip with the column header

[arminmeh]

While working on #9954 I have noticed that sometimes the cell values are read twice as well.
This occurs because of the title prop that was added in #7671
Accessibility tools were already showing warnings for this approach.

Since column header component is using tooltip to show the whole content, I have added the same to the cells and removed the title prop.

This introduced a small UX issue, since the cell text content is added directly to the cell container to reduce the number of nodes. Tooltip shows up way below the cell, because it has a default margin relative to the target element.

I have added a default slotProp value for the Tooltip component, to render it just a bit over the bottom border

const tooltipProps = slotProps?.tooltip || {
  slotProps: {
    popper: {
      sx: {
        [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]:
          {
            marginTop: '-5px',
          },
      },
    },
  },
};

With default margins

With mt = -5px

To allow changes, I repeated this pattern (but with default)

Issue that should bring this topic even further #7323

[mui-bot]

Deploy preview: https://deploy-preview-14484--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 0f07bbe

[arminmeh]

This issue is still present on the GridCell, but I couldn't apply the same because it would impact performance