帶有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 ，因為這useHTML我帶來另一種蠕蟲病毒。

Answer 1

使用CSS並更新工具提示和工具提示格式化程序，即可解決此問題。

供參考檢查工具提示

更新的工具提示

"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
}

小提琴演示