Question

我们的页面包含由HighCharts生成的大量水平条形图。简而言之，图表中的工具提示正在被下面的图表和它们的侧面所掩盖。我已经弄乱了z-index，但它似乎没有什么区别。我看过以前类似的问题，但没有帮助。

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

我尝试过使用容器上的z-index和工具提示，但我没有看到任何差异：

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

Answer 1

对我来说，在悬停时设置简单的css z-index工作：

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

Answer 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");
  });  
});

Answer 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。

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

3 个答案: