[Solved]-Highcharts - HTML tooltip & datalabels render issue-Highcharts

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.