div 上显示的 Highcharts 工具提示

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'
    }
}

但其中 none 到目前为止已经奏效。

我的 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

Sam，我尝试使用你的 JS 和你的 CSS，但无法获得 .circle-text 上方的工具提示。但是，我确实添加了此动画作为解决方法。如果您确定要实现您描述的结果，请随时忽略此内容。

我所做的唯一更改是对您的 CSS (.circle-text)。当鼠标悬停在 .bubble 上时，这将导致 .circle-text 消失。

/* https://anacidre.com/creating-circle-text-using-html-css/ */
.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: 9999;
    top: 50px;
    left: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px #000;
    transition: transform 500ms;
}

.bubble:hover .circle-text {
    transform: scale(0);
}

Answer 2

要使您的样式相对于其他 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

div 上显示的 Highcharts 工具提示

Highcharts tooltip displayed over div

javascript

css

tooltip

highcharts