React ag-grid自定义tooltip在iPad端所有浏览器无法显示问题求助

问题原因 #

ag-grid默认Tooltip仅监听桌面端鼠标事件，未开启触控设备触发支持，因此iPad等iOS触控设备无法触发tooltip显示。

解决方案 #

1. 新增ag-grid触控相关配置 #

在AgGridReact组件中添加3个触控适配属性，修改后代码如下：

<AgGridReact
        columnDefs={props.columnDefs}
        onGridReady={props.onGridReady}
        frameworkComponents={props.frameworkComponents}
        defaultColDef={props.defaultColDef}
        rowData={props.rowData}
        icons={{
          sortAscending: "<i class='ag-icon ag-icon-small-up'/>",
          sortDescending: "<i class='ag-icon ag-icon-small-down'/>",
        }}
        onRowClicked={props.rowClicked}
        onCellClicked={props.cellClicked}
        rowSelection={props.rowSelection}
        onRowSelected={props.rowSelected}
        pagination={props.pagination}
        paginationPageSize={props.paginationPageSize}
        domLayout="autoHeight"
        tooltipShowDelay={0}
        tooltipMouseTrack={false}
        {/* 新增触控适配配置 */}
        enableTouch={true}
        tooltipTrigger="both"
        tooltipTouchShowDelay={500}
      />

配置说明：

• enableTouch={true}：显式开启ag-grid触控设备支持
• tooltipTrigger="both"：设置tooltip同时支持鼠标、触控两种触发方式，默认仅支持鼠标
• tooltipTouchShowDelay={500}：设置触控长按后tooltip显示延迟，单位为毫秒，可根据使用习惯调整

2. 解决iOS长按冲突 #

iOS Safari默认长按会呼出文本选择、放大镜菜单，若和tooltip触发冲突，可给ag-grid单元格添加如下CSS禁用文本选择：

.ag-cell {
  user-select: none;
  -webkit-user-select: none;
}

3. 其他排查项 #

• 检查自定义custom-tooltip类的z-index值，确保层级足够高不会被其他元素遮挡
• 确认没有上层元素绑定了touchstart、touchend事件并阻止了事件冒泡，导致ag-grid无法捕获触控事件
• 若使用的ag-grid版本低于25.x，建议升级到最新LTS版本，旧版本无原生触控tooltip触发支持，需手动在单元格绑定长按事件调用api.showTooltipForCell()方法触发显示

内容的提问来源于stack exchange，提问作者Dhiyanesswar R B