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

2019年7月28日 115次阅读

我正在尝试使用非常大的工具提示的
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设置为工具提示,因为这会为我打开另一种蠕虫病毒.

最佳答案 使用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演示

点赞