highcharts tooltip z-index

时间:2013-12-13 00:09:56

标签: javascript highcharts

我正在尝试让highcharts工具提示使用useHTML将zIndex放在另一个HTML元素上。

看到这个小提琴:http://jsfiddle.net/sDu8V/

我希望工具提示能够覆盖粉红色的盒子 - 而不是在它下面。

我错过了什么?

2 个答案:

答案 0 :(得分:13)

可能的解决方案:http://jsfiddle.net/sDu8V/1/

必需的CSS:

.highcharts-container {
  position: inherit !important;
}
.highcharts-tooltip {
  z-index: 9998;
}

感谢 @Piotr ,更新了4.1.x的设计。

答案 1 :(得分:2)

您不能仅使用 工具提示来渲染粉红色框,因为整个图表都在单个SVG对象中呈现,该对象在 totallly 上方或下方你的粉红色。

您可以做的是通过使背景透明来将整个图表渲染到粉红色框上。

你的图表:

chart: { backgroundColor:'transparent' }

你的div也应该在图表下方:

<div id="box" style="z-index:0"></div>

实例:http://jsfiddle.net/7TcJ6/