修改AG-grid单元格中HighChart提示框z-index实现跨单元格重叠展示

问题根因 #

你的配置不生效的核心原因是AG Grid单元格默认的堆叠上下文和溢出限制，优先级远高于你给tooltip设置的z-index：

• AG Grid的.ag-cell、.ag-row元素默认设置了overflow: hidden，内部元素哪怕是绝对定位，只要还在这些元素的DOM层级内，超出边界的部分一定会被截断
• 只要tooltip还渲染在AG Grid单元格的DOM子树内，单元格自身形成的堆叠上下文会直接限制子元素的z-index作用范围，你设置再高的z-index也无法突破父元素的层级限制

可直接落地的解决方案 #

方案1：优先使用HighChart官方提供的tooltip脱离配置 #

直接在HighChart初始化配置中开启tooltip.outside = true，该配置会自动把tooltip元素挂载到页面<body>根节点下，完全脱离AG Grid的DOM层级，所有z-index、定位规则都不再受单元格限制，是成本最低的解决方案：

Highcharts.chart('your-chart-container', {
  // 其他图表配置保持不变
  tooltip: {
    outside: true, // 核心配置
    zIndex: 99999, // 此处z-index已可以正常生效
    // 其余你的自定义tooltip配置（比如formatter、样式等）保持不变
  }
})

方案2：修改AG Grid单元格溢出规则（适合不需要超出表格视口显示的场景） #

如果不需要tooltip超出AG Grid的滚动视口显示，可以针对性修改承载图表的单元格、行的溢出规则：

1. 给渲染图表的列设置自定义cellClass，比如chart-cell，避免全局修改所有单元格样式
2. 添加如下CSS规则：

/* 仅针对承载图表的单元格放开溢出限制 */
.chart-cell {
  overflow: visible !important;
}
/* 同步放开行元素的溢出限制 */
.ag-row {
  overflow: visible !important;
}

如果希望tooltip可以超出表格滚动视口显示，还要额外修改.ag-body-viewport的overflow规则，不过该修改会影响AG Grid的滚动功能，非必要不推荐。

内容的提问来源于stack exchange，提问作者Pooja