隐藏在按钮和表格下方的工具提示说明
Tooltip descriptions hidden beneath buttons and tables
我想在我的highcharts饼图中添加两个按钮和一个表。然而,当我这样做时,工具提示弹出窗口会隐藏在它们下面。
如何确保表格和按钮正确显示,但当工具提示(和导出菜单)弹出时,它们也在后台?
表格和按钮
<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/
您需要使用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> <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演示
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何访问高图表工具提示中的任何特定数据
- 如何在jQuery点击函数中添加并显示引导工具提示
- 我可以't使用jQuery更改工具提示引导程序的位置
- 语义UI中格式化的工具提示
- 柱状图上的Highcharts工具提示
- 引导工具提示用法,在搜索字段中
- 将工具提示添加到d3散点图中
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- 工具提示在带有两个图表的d3.js中消失
- 隐藏在按钮和表格下方的工具提示说明