带有 html 标题的 SVG 工具提示 z-index

Question

我正在尝试使用带有非常大工具提示的 HTML 标题。但是我似乎无法让工具提示背景出现在标题上方。

这是我的代码：

var chart = new Highcharts.Chart({
  "chart": {
    "type": "gauge",
    "renderTo": "chart-2-container",
    "marginTop": 60
  },
  "series": [{
    "data": [{
      "y": 55.6,
      "name": "Area",
      "tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7"
    }],
    "name": "%"
  }],
  "tooltip": {
    "borderColor": "#E2E2E2",
    "borderRadius": 5,
    "backgroundColor": "white",
    "style": {
      "color": "#454545",
      "fontSize": 14,
      "fontFamily": "Arial, sans-serif",
      "zIndex": 9999,
      "lineHeight": 14 * 1.4
    },
    "formatter": function() {
      return this.point.tooltip;
    }
  },
  "title": {
    "floating": true,
    "useHTML": true,
    "style": {
      "zIndex": 1,
    },
    "text": "<a href=\"http://www.google.com\">This is some link as a very long title which will probably wrap a couple of lines</a>"
  },
  "yAxis": {
    "title": null,
    "tickPixelInterval": 72,
    "tickLength": 10,
    "minorTickLength": 8,
    "minorTickWidth": 1,
    "min": 50.6,
    "max": 75.7,
    "plotBands": [{
      "from": 50.6,
      "to": 57.1,
      "color": "#ee2c34",
      "thickness": 15,
    }, {
      "from": 57.1,
      "to": 59.4,
      "color": "#f07627",
      "thickness": 15,
    }, {
      "from": 59.4,
      "to": 64.7,
      "color": "#a88735",
      "thickness": 15,
    }, {
      "from": 64.7,
      "to": 75.7,
      "color": "#2c876d",
      "thickness": 15,
    }]
  },
  "pane": {
    "startAngle": -150,
    "endAngle": 150
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart-2-container' style="width: 400px; height: 300px;">

</div>

（也作为小提琴https://jsfiddle.net/d6q1gt4m/）

问题是背景总是在标题后面。我可以切换到非 html 标题，但是我遇到的问题是，如果标题正在换行，那么只有第一行实际上是 URL（并且我需要重新应用所有链接样式）。

有谁知道如何让 svg 工具提示出现在 HTML 之上？

注意：如果可能的话，我希望避免为工具提示设置useHTML，因为这会为我打开另一个蠕虫罐。

Answer 1

使用 CSS 并更新工具提示和工具提示格式化程序，问题已得到解决。

参考检查tooltip

更新工具提示

"tooltip": {
    "backgroundColor": "rgba(255,255,255,0)",
    "borderWidth": 0,
    "borderRadius": 1,
    "shadow": false,
    "useHTML": true,
    "style": {
      "color": "#454545",
      "fontSize": 14,
      "fontFamily": "Arial, sans-serif",
      "zIndex": 9999,
      "lineHeight": 1.8
    },
    "formatter": function() {
      return "<div>" + this.point.tooltip + "</div>";
    }
  },

css

.highcharts-tooltip {
  z-index: 9998;
}

.highcharts-tooltip div {
  background-color: white;
  border: 1px solid #E2E2E2;
  opacity: 1;
  z-index: 9999!important;
  padding: 5px
}

Fiddle演示