Highcharts tooltip displayed over div

2
votes

I'd like to have the pie chart tooltips to be displayed over the div partially hiding the chart.

Here is my HTML structure. The .circle-text element contains my div and the .container the chart. 

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

I've tried solutions using 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;
}

or Highcharts properties :

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

But none of them has worked so far.

My div covering the chart has the following style and I don't see how it might interfere with the tooltip 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

2
javascriptcsshighchartstooltip

2 Answers

0
votes

To make your styles respected in relation to other html elements, set useHTML property for tooltip to true:

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

Live demo: http://jsfiddle.net/BlackLabel/4r9Lkcz7/

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

0
votes

Sam, I tried playing with your JS as well as your CSS and was not able to get the tooltip above the .circle-text. However, I did add this animation in as a workaround. Please feel free to ignore this if you are firm on achieving the result you described.

The only changes I made were to your CSS (.circle-text). This will cause the .circle-text to disappear when .bubble is hovered over.

/* 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);
}