给ag-grid表头添加tooltip的两种方式

方式一：（统一为表格所有列展示列头的tooltip）

<CustomCellEditAgGrid
            colDefParams={this.columns}
            defaultColDef={
              {
                suppressMenu: true,
                lockVisible: true,
                resizable: true,
                sortable: true,
              }
            }
            tooltipShowDelay={0}          //ag-grid展示tooltip的延迟时间
            autoGroupColumnDef={{         //获取列名，调用ag-grid显示tooltip的回调函数
              tooltipValueGetter: (params) => {
                let name = params.value
                return name;
              }
            }}
            suppressContextMenu={true}
            onGridReady={this.onGridReady}
            rowData={this.props.beams}
            onFirstDataRendered={this.sizeToFit}
          />

方式二：（可自定义tooltip展示的内容）

[1]先开启tooltip功能：

<CustomCellEditAgGrid
            colDefParams={this.columns}
            defaultColDef={
              {
                suppressMenu: true,
                lockVisible: true,
                resizable: true,
                sortable: true,
              }
            }
            enableBrowserTooltips={true}    //开启ag-grid的toolTip
            suppressContextMenu={true}
            onGridReady={this.onGridReady}
            rowData={this.props.beams}
            onFirstDataRendered={this.sizeToFit}
          />

[2]在column中添加headerTooltip,仅为表头添加tooltip

      this.columns = [];
      this.columns.push(
      {
        headerName: getIntl().formatMessage({ id: 'text.table.number' }),
        field: 'number',
        pinned: true,
        //使用headerTooltip为表头添加toolTip
        headerTooltip: getIntl().formatMessage({ id: 'text.table.number' }),    
      },
      {
        headerName: getIntl().formatMessage({ id: 'text.table.name' }),
        field: 'name',
        editable: this.props.isEditable,
        //为表头添加toolTip
        headerTooltip: getIntl().formatMessage({ id: 'text.beam-table.beam-name' }),
      });

如果要为表格中的内容添加tooltip,使用 tooltipField:

      this.columns = [];
      this.columns.push(
      {
        headerName: getIntl().formatMessage({ id: 'text.table.number' }),
        field: 'number',
        //为表格内容添加tooltip
        tooltipField:'number',
        pinned: true,  
      },
      {
        headerName: getIntl().formatMessage({ id: 'text.table.name' }),
        field: 'name',
        //为表格内容添加tooltip
        tooltipField:'name'
        editable: this.props.isEditable,
      });

最后：两种方法展示tooltip的样式不一样：

方式一的展示样式：

方式二的展示样式：

截图截不了，自己去试。