HighCharts tooltip appearing behind the dialog holding the chart

Question

I have an organization HighChart that I'm dynamically creating in javascript using angular. In the $scope.chartConfig I have these declared:

    $scope.chartConfig = {
        title: {
          text: ''
        },
        chart: {
          inverted: false
        },
        series: [ {
          type: 'organization',
          data: [],
          keys: [ 'from', 'to' ],
          showInLegend: true,
          levels: [],
          nodes: []
        } ],
        options: {
          exporting: { enabled: false },
          tooltip: {
            enabled: true,
            outside: true,
            useHTML: true,
            formatter: function() {
              console.log("LOOK AT ME " + this.point.info);
              return this.point.info;
            }
          }
        }
    };

When it's like this, then the tooltip shows up behind this dialog window. The "LOOK AT ME" part shows up in the console as expected.
If I remove the options: { tooltip: {...}} part, then the tooltip shows up in front like it should but it just has the name in it (the default) instead of the info, which is what I want to show.
I've tried adding options: { tooltip: { zindex: 999 }}, but no change - it still appears behind.
I've tried adding options: { tooltip: { style: { zIndex: 999 }}} with also no change - tooltip still appears behind the dialog. Any ideas on how to get the HighCharts tooltip to appear in the very front, on top of the chart, instead of behind the dialog holding the chart? Thanks.

The image shows the chart in a dialog which is launched from a dialog which has the tooltip behind it which is in front of the main page from which the dialog is launched.
I tried recreating in JsFiddle but I'm struggling to resolve some Angular issues and since this is a dialog it's getting info from a previous window, which makes it hard to break it out.

Answer 1

I struggled to recreate this in an online code editor due to the issue being the z-index. Specifically, if you set the tooltip's "outside" option to true, the z-index is hardcoded to 3 per HighCharts:

                if (this.outside) {
                    this.container = container = H.doc.createElement('div');
                    container.className = 'highcharts-tooltip-container';
                    H.css(container, {
                        position: 'absolute',
                        top: '1px',
                        pointerEvents: options.style && options.style.pointerEvents,
                        zIndex: 3
                    });
                    H.doc.body.appendChild(container);

                    this.renderer = renderer = new H.Renderer(container, 0, 0);
                }

There is no easy way to get around this since it's inside getLabel(). This is not usually an issue since most of our charts are not in dialog windows, but the chart I'm working on is in a nested dialog window which means z-index of 3 is behind them. I'm going to raise this point with HighCharts, but for now the fix is to set "outside" to false.

    options: {
      exporting: { enabled: false },
      tooltip: {
        enabled: true,
        outside: false,
        useHTML: true,
        formatter: function() {
          return this.point.info;
        }
      }
    }

Alternivately, if you want it to work with outside=true, then you need to add this to your css (can change the index number but make sure it's high) - the !important is what makes it overrule the setting in highcharts I believe:

.highcharts-tooltip-container {
  z-index: 999999 !important;
}