Highcharts tooltip hidden behind second chart

0
votes

Our page has a large number of horizontal bar charts that generated by HighCharts. Long story short, the tooltips from charts are being covered up by the charts below and to the side of them. I've messed around with the z-index and it doesn't seem to be making a difference. I've looked at previous similar questions, but they are no help.

Here's my example: http://jsfiddle.net/o15gywrv/5/

If you hover over the first chart, you'll see that the tooltip is covered up by the second chart.

I've tried playing with the z-index on the container and the tooltip and I'm not seeing any difference:

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

3 Answers

6
votes

For me, simple css z-index set on hover worked:

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

I couldn't find a CSS solution for it but here's a jQuery solution to resolve your issue: jsFiddle.

jQuery:

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

The fix is to override the z-index for the highcharts-container using the following:

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

This avoids creating different z-index contexts for each highcharts-container.

Check the fix here: http://jsfiddle.net/o15gywrv/24/

See this answer for details.