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

山姆，我尝试使用您的JS和CSS，但无法在.circle-text上方获得工具提示。但是，我确实添加了此动画作为解决方法。如果您坚定地实现所描述的结果，请随时忽略这一点。

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

/* 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上

2 个答案: