javascript - Highcharts 工具提示显示在 div 上

Question

我想让饼图工具提示显示在部分隐藏图表的 div 上。

这是我的 HTML 结构。 .circle-text 元素包含我的 div 和 .container 图表。

<div class="bubble">
    <div class="circle-text"></div>
    <div id="container"></div>
</div>

我尝试过使用 CSS 的解决方案:

.highcharts-container {
    position: inherit !important;
}
.highcharts-tooltip {
    z-index: 9998 !important;
}
.highcharts-tooltip span {
    background-color:white;
    border:1px solid green;
    opacity:1;
    z-index:9999!important;
}

或 Highcharts 属性:

tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
    style: {
        'color': 'pink',
        'z-index': '9999'
    }
}

但到目前为止，它们都没有奏效。

我覆盖图表的 div 具有以下样式，我看不出它会如何干扰工具提示 z-index。

.circle-text {
    position: absolute;
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #3A3A4F;
    color: #fff;
    z-index: 2;
    top: 50px;
    left: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px #000;
}

https://codepen.io/SamHCadman/pen/MzzrGJ

Answer 1

要使您的样式与其他 html 元素相关，请将工具提示的 useHTML 属性设置为 true:

tooltip: {
    useHTML: true,
    padding: 0,
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
    style: {
        'color': 'pink',
        'z-index': '9999'
    }
}

现场演示:http://jsfiddle.net/BlackLabel/4r9Lkcz7/

API:https://api.highcharts.com/highcharts/tooltip.useHTML