feat(table v2): add tooltip to table header

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx

@@ -506,6 +506,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
           paginationPageSizeSelector={PAGE_SIZE_OPTIONS}
           suppressDragLeaveHidesColumns
           pinnedBottomRowData={showTotals ? [cleanedTotals] : undefined}
+          tooltipShowDelay={500}
           localeText={{
             // Pagination controls
             next: t('Next'),

superset-frontend/plugins/plugin-chart-ag-grid-table/src/transformProps.ts

@@ -345,6 +345,7 @@ const processColumns = memoizeOne(function processColumns(
       column_config: columnConfig = {},
       query_mode: queryMode,
     },
+    rawDatasource,
     queriesData,
   } = props;
   const granularity = extractTimegrain(props.rawFormData);
@@ -384,6 +385,12 @@ const processColumns = memoizeOne(function processColumns(
         ? config.currencyFormat
         : savedCurrency;
 
+      const description =
+        rawDatasource.columns?.find((item: any) => item.column_name === key)
+          ?.description ??
+        rawDatasource.metrics?.find((item: any) => item.metric_name === key)
+          ?.description;
+
       let formatter;
 
       if (isTime || config.d3TimeFormat) {
@@ -430,6 +437,7 @@ const processColumns = memoizeOne(function processColumns(
         isPercentMetric,
         formatter,
         config,
+        description,
       };
     });
   return [metrics, percentMetrics, columns] as [

superset-frontend/plugins/plugin-chart-ag-grid-table/src/types.ts

@@ -192,6 +192,7 @@ export interface InputColumn {
     | CurrencyFormatter;
   originalLabel?: string;
   metricName?: string;
+  description?: string;
 }
 
 export type ValueRange = [number, number] | null;

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts

@@ -280,6 +280,7 @@ export const useColDefs = ({
       return {
         field: colId,
         headerName: getHeaderLabel(col),
+        headerTooltip: col.description || '',
         valueFormatter: p => valueFormatter(p, col),
         valueGetter: p => valueGetter(p, col),
         cellStyle: p => {