9

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?

3 Answers 3

15

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.

4
  • 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?
    – frandevel
    Jan 16, 2015 at 9:45
  • Hover IE -> tooltip is displayed over pink box, ant that was the question, as I remember.
    – Paweł Fus
    Jan 17, 2015 at 16:36
  • 2
    I made minor changes to your solution: jsfiddle.net/sDu8V/24 Removed margin and improved content Tooltip.
    – Piotr
    Mar 9, 2015 at 9:46
  • Thanks! Caused probably by changes between 2.x and 4.x ;)
    – Paweł Fus
    Mar 9, 2015 at 11:23
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/

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.