highcharts tooltip z-index

Question

I'm trying to get the highcharts tooltip to have a zIndex using useHTML to position it over another HTML element.

See this fiddle: http://jsfiddle.net/sDu8V/

I'd like the tooltip to go over the pink box - instead of under it.

What am I missing?

Answer 1

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.

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