隐藏在按钮和表格下方的工具提示说明

Question

我想在我的 highcharts 饼图中添加两个按钮和一个 table。但是，当我这样做时，工具提示弹出窗口隐藏在它们下面。

如何确保 table 和按钮正确显示，但在弹出工具提示（和导出菜单）时它们也在后台？

Table 和按钮

<div style="z-index: 1; position:absolute; margin-top:50px; margin-left: 25px; font-size: 10px;"  data-toggle="buttons-radio" >
<button id="all"  type="button">All</button>
<button id="refresh" type="button" >Refresh</button>

</div>
 <table style="background-color: white; position:absolute; z-index: 1; margin-left: 400px; margin-top:70px;  width:20%; font-size: 12px;">
 <th>Output</th>
 <tr></tr>
  <tr>
    <td><strong>Total X</strong></td>
    <td id="total" align="right">900</td>
  </tr>
  <tr>
    <td><strong>Total Y</strong></td>
    <td id="renew" align="right">450</td>
  </tr>
</table>

http://jsfiddle.net/2uf8e3xu/3/

Answer 1

您需要使用 HTML 和 CSS

格式化工具提示

tooltip: {
    // remove the original tooltip format
    backgroundColor: "rgba(255,255,255,0)",
    borderWidth: 0,
    borderRadius: 0,
    shadow: false,
    useHTML: true,
    // set the new tooltip format
    formatter: function () {
            return '<div style="border: 1px solid ' + this.point.color + '; padding: 3px;">'+this.series.name + '<br /><span style="color: ' + this.point.color + '">'+this.point.name +'</span>&nbsp;<b>' + Highcharts.numberFormat(this.point.y, 2) + '</b>% of total</div>'
        }
}

用这个css

.highcharts-container {
    position: inherit !important;
}
.highcharts-tooltip {
    z-index: 9998;
}
.highcharts-tooltip div {
    background-color:white;
    opacity:1;
    z-index:9999!important;
}

JSFiddle demo

隐藏在按钮和表格下方的工具提示说明

Tooltip descriptions hidden beneath buttons and tables

html

javascript

css

z-index

highcharts