javascript - 带有 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>

(也作为 fiddle https://jsfiddle.net/d6q1gt4m/ )

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

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

注意:如果可能的话，我想避免必须为工具提示设置 useHTML，因为这为我打开了另一个蠕虫 jar 头。

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演示