隐藏在第二张图表后面的 Highcharts 工具提示答案

【问题标题】：Highcharts tooltip hidden behind second chart隐藏在第二张图表后面的 Highcharts 工具提示
【发布时间】：2016-11-06 22:30:21
【问题描述】：

我们的页面有大量由 HighCharts 生成的水平条形图。长话短说，图表中的工具提示被下方和旁边的图表所掩盖。我弄乱了z-index，它似乎没有什么不同。我看过以前的类似问题，但没有任何帮助。

这是我的例子：http://jsfiddle.net/o15gywrv/5/

如果您将鼠标悬停在第一个图表上，您会看到工具提示被第二个图表所覆盖。

我尝试过使用容器上的 z-index 和工具提示，但没有发现任何区别：

.highcharts-container {
    overflow: visible !important;
    z-index: 0 !important;
}
.highcharts-tooltip {
    z-index: 9998;
}

【问题讨论】：

标签： css highcharts

【解决方案1】：

对我来说，悬停时设置的简单 css z-index 有效：

.highcharts-container:hover { z-index: 1 !important; }

【讨论】：

【解决方案2】：

我找不到它的 CSS 解决方案，但这里有一个 jQuery 解决方案来解决您的问题：jsFiddle。

jQuery:

$(document).ready(function(){
  $("#chart1").mouseover(function(){
    $("#highcharts-3").css("z-index","-1");
  });
  $("#chart1").mouseout(function(){
    $("#highcharts-3").css("z-index","0");
  });  
});

【讨论】：

【解决方案3】：

修复方法是使用以下内容覆盖 highcharts-container 的 z-index：

.highcharts-container {
   overflow: visible !important;
   z-index: auto !important;
}

这避免了为每个 highcharts-container 创建不同的 z-index 上下文。

在此处检查修复：http://jsfiddle.net/o15gywrv/24/

详情请见this answer。

【讨论】：