HighCharts: Labels visible over tooltip

Question

Labels on my chart are showing over tooltip, which doesn\'t look very nice. I tried to play with zIndex, but to no result. How can I make tooltips not transpare

Answer 1

I had same issue. My solution. Tooltip - useHTML = true. Tooltip - Formatter = HTML code there with one div container. here margin in negative value is important in css.

tooltip: {
    backgroundColor: "rgba(255,255,255,1)",
    useHTML: true,
    formatter: function() {
        var html = [];
        html.push('Correlation to ' + this.point.p + '
');
        if (null != this.point.associatedPoints 
                && typeof this.point.associatedPoints != 'undefined' 
                && this.point.associatedPoints.length > 0) {
            $.each(this.point.associatedPoints, function(i, associatedPoint) {
                html.push('Responses: ' + associatedPoint.nFormatted);
            });
        }
        return '
' + html.join('') + '
';
    }

CSS:

.highcharts-tooltip span {
    z-index: 9999 !important;
    top:2px !important;
    left:2px !important;
}
.highcharts-tooltip span .tooltip-body{
    background-color:white;
    padding:6px; 
    z-index:9999 !important;
    margin-bottom:-14px;
    margin-right:-14px;
}