score:8

Accepted answer

ok, so here is a workaround for my problem... the idea is to create your own custom tooltip.

the solution was given on the highcharts forum: highcharts forum post

to do so, set the 'usehtml' property on both datalabels and tooltips, remove some defaults properties of the tooltips and setup the css classes in the formatters functions:

//js
datalabels: {
    ...
    usehtml: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
}

tooltip: {
    ...
    borderwidth:0,
    borderradius:0,
    shadow:false,
    usehtml: true,
    formatter: function() {
        return ("<div class='tooltip'>" + this.y + "</div>");
    }
}

the final step (the most important) is to set up the css rules for the highcharts-tooltip span class (which is used by highcharts to render html tooltips).

//css
.highcharts-tooltip span {
    background-color:white;
    z-index:9999!important;  
}

notice the z-index property, which is the property that will allow the tooltip to render over the datalabel.

now you can just custom your tooltip by setting css rules for the 'tooltip' class.

for a full live example, see the jsfiddle here: custom tooltip

note: it is not mandatory to specificy the datalabel class in the formatter for this solution to works, i just need so i can register a specific mouse event on it.

score:-1

check http://api.highcharts.com/highcharts#tooltip.backgroundcolor for tooltip background color.

same kind problem was solved with this property at highslide forum

score:4

6 years later, along with hc v6.1.1, a new tooltip option has been added, which solves this problem. see tooltip.outside

datalabels: {
    usehtml: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
},

tooltip: {
    outside: true
}

Related Query

More Query from same tag