Highcharts tooltip getting overlapped by graph when locker service is activated

Question

I'm facing an issue where Highcharts tooltip is being overlapped by the graph itself. Please find the following image which depicts the same:

When LS is active:

When LS is deactivated

(The scale of the two graphs are different because I'm setting dynamic height for the chart using $(window).height() which hasn't been fixed by Salesforce yet when LS is active.)

Code:

Helper:

drawChart : function(component, helper) {
        if(component.isValid() && component.get("v.isResourcesLoaded") 
           && component.get("v.isDataChanged")) {

           var stackedColumnChartObj = new Highcharts.Chart({
                chart: {
                    renderTo: component.find("stackedColumnChart").getElement()
                },
                title: {
                    text: null
                },                        
                xAxis: {
                    categories: labelList,
                    title: {
                        text: null
                    },
                    labels: {
                        enabled: true,
                        format: '`{value}'
                    }
                },
                yAxis: [{
                    enabled: true,
                    title: {
                        text: null
                    }                                         
                }],
                plotOptions: {
                    series: {
                        animation: false,
                        cursor: 'pointer',
                        marker: {
                            enabled: false
                        }                                    
                    }
                },
                tooltip: {
                     useHTML: true,
                     borderWidth: 0,
                     borderRadius: 0,
                     backgroundColor:"rgba(255,255,255,0)",
                     shadow: false,
                     formatter: function(){
                        var s = this.series.name + ': '+ '<br/>Total: '  
                                +this.stackTotal;       
                        return ("<div class='tooltip'>" + s + "</div>");
                     },
                    enabled: !component.get("v.isDrillDown")
                },
                credits: {
                    enabled: false
                },
                series: columnDataList                  
          });
}

Renderer:

({
    afterRender: function(component, helper) {
        this.superAfterRender();
    },
    rerender: function(component, helper) {
        this.superRerender();   
        helper.drawChart(component, helper);        
    }
})

CSS:-

.THIS .highcharts-tooltip span .tooltip{    
    z-index:999999999 !important;
    border: 1px solid;
    background-color: white;
    padding:5px;
    border-radius: 4px;
}

This issue is not present when locker service is deactivated. But I want this to work perfectly when LS is deactivated. It would be very helpful if anyone can provide any insights regarding this.

Edit: As per Pawel's suggestion I rendered the tooltip as HTML (I've edited the Highcharts initialization code above). The tooltip renders in Chrome device simulator. But in iPad and iPhone, it throws the following errors on clicking the graph:

TypeError: null is not an object (evaluating 'e.call')

TypeError: undefined is not an object (evaluating 'charts[H.hoverChartIndex].mouseIsDown')