score:15

Accepted answer

Possible solution: http://jsfiddle.net/sDu8V/1/

Required CSS:

.highcharts-container {
  position: inherit !important;
}
.highcharts-tooltip {
  z-index: 9998;
}

Thanks to @Piotr, updated design for 4.1.x.

score:2

You can't have only the tooltip to get rendered over the pink box because the whole chart is rendered in a single SVG object that is either totallly over or beneath your pink both.

What you can do is to render the whole chart over the pink box by making it background transparent.

Your chart: 

chart: { backgroundColor:'transparent' }

Your div should also be beneath the chart:

<div id="box" style="z-index:0"></div>

Live example: http://jsfiddle.net/7TcJ6/


Related Query

More Query from same tag