Tooltip issue on columnrange - highcharts

Question

Please look at the example. I've created on jsfiidle.
http://jsfiddle.net/cr1t/LdLn2/1/
The issue I'm having is with the tooltip that floats above the graph. The text on the column range seems to have a much higher z-index. But no matter what I try and set it on the div style sheet, it shows threw. I'd like the have the point detail in html, because I want to make it a hyperlink tag.
plotOptions: {
columnrange: {
dataLabels: {
inside: true,
enabled: true,
useHTML: true,
formatter: function () {
if (this.y === this.point.low) {
return '<div style="padding:2px;text-align:center;color:black;overflow:hidden;width:' + (this.point.plotLow - this.point.plotHigh - 4) + 'px">' + this.point.low + '°C - ' + this.point.high + '°C </div>';
}
}
}
}
},

Answer 1

Thanks Anto
I followed the duplicate.
I managed to get it working the way I wanted with css
http://jsfiddle.net/cr1t/LdLn2/2/
.highcharts-data-labels {
z-index: 1 !important;
}
.highcharts-tooltip span {
background-color:white;
opacity:1;
z-index:9999 !important;
padding:5px
}
.tooltip {
padding:5px
}
and setting the style on the tooltip
tooltip: {
backgroundColor: "rgba(255,255,255,1)",
style: {
padding: '1px'
},
shadow: false,
useHTML: true,
percentageDecimals: 2,
formatter: function () {
return '<div class="tooltop">'+ this.point.category + '<br />' +
'Temprature ' + this.point.low + '°C - ' + this.point.high + '°C </div>'
}
}