HighCharts 工具提示出现在包含图表的对话框后面答案

【问题标题】：HighCharts tooltip appearing behind the dialog holding the chartHighCharts 工具提示出现在包含图表的对话框后面
【发布时间】：2019-08-05 20:51:36
【问题描述】：

我有一个组织 HighChart，我使用 Angular 在 javascript 中动态创建。在 $scope.chartConfig 我声明了这些：

    $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;
            }
          }
        }
    };

当它是这样的时候，工具提示就会出现在这个对话窗口的后面。 “看我”部分按预期显示在控制台中。
如果我删除 options: { tooltip: {...}} 部分，则工具提示会按原样显示在前面，但其中只有名称（默认）而不是信息，这就是我想展示。
我尝试添加选项：{ tooltip: { zindex: 999 }}，但没有任何变化 - 它仍然出现在后面。
我尝试添加选项：{ tooltip: { style: { zIndex: 999 }}} 也没有任何变化 - 工具提示仍然出现在对话框后面。关于如何让 HighCharts 工具提示出现在图表顶部而不是保存图表的对话框后面的任何想法？谢谢。

该图像显示了一个对话框中的图表，该对话框是从一个对话框启动的，该对话框后面有工具提示，该工具提示位于启动对话框的主页前面。
我尝试在 JsFiddle 中重新创建，但我正在努力解决一些 Angular 问题，并且由于这是一个对话框，它从前一个窗口获取信息，这使得它很难破解。

【问题讨论】：

你能在像 jsfiddle 这样的在线代码编辑器中重现你的问题吗？
我更新了我的问题，因为这是个好主意，但遗憾的是我无法让它在 jsfiddle 中工作。
不工作的演示也没有用。请尝试让它工作

标签： highcharts tooltip

【解决方案1】：

由于 z-index 的问题，我很难在在线代码编辑器中重新创建它。具体来说，如果您将工具提示的“外部”选项设置为 true，则 z-index 将被硬编码为 3 每个 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);
                }

因为它在 getLabel() 中，所以没有简单的方法来解决这个问题。这通常不是问题，因为我们的大多数图表不在对话框窗口中，但我正在处理的图表在嵌套对话框窗口中，这意味着 z-index 为 3 在它们后面。我将通过 HighCharts 提出这一点，但目前解决方法是将“outside”设置为 false。

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

或者，如果您希望它与 outside=true 一起使用，那么您需要将其添加到您的 css 中（可以更改索引号但确保它很高） - ！important 是什么使它推翻了 highcharts 中的设置我相信：

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

【讨论】：