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?

Sage

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.

Transect

Sorry @Paweł Fus, but I don't see how this is solving the issue. On the jsfiddle I still get the pink box covering the tooltips with no change to get the tooltip over it. I tested it on Chrome and Safari. Could you please check and confirm? – Husain

Hover IE -> tooltip is displayed over pink box, ant that was the question, as I remember. – Hodgson

I made minor changes to your solution: jsfiddle.net/sDu8V/24 Removed margin and improved content Tooltip. – Atonement

Thanks! Caused probably by changes between 2.x and 4.x ;) – Hodgson

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/

Hemoglobin

Answer 3

if you are searching solution when you have no access to the tooltip class so you can do this, paste this code below before your Highchart.chart or component initialization (btw works for React as well)

(function (H) {
  H.wrap(H.Tooltip.prototype, "getLabel", function (proceed) {
    var t = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    if (this.container) {
      H.css(this.container, { zIndex: 1301 });
    }

    return t;
  });
})(Highcharts);

it works for me, in my case tooltip is outside:true so its rendered in its own portal, but you still can put its class highcharts-tooltip-container in your global CSS file

I hope it will help to someone

Feathering

While I'll probably use non-prototype-altering final solution, this was VERY helpful for debugging a not-visible tooltip! – Monck

non-prototype-altering final solution? It would be great to add some links to the solution you talking about – Feathering