Question

I am using HighCharts with JQuery (ASP.Net, C#, MVC) to show chart on my web page. I have used below code to display the tooltip initially when page loads. Also to keep the tooltip and crosshair when mouse moves out of chart area. Thanks to answer by @jugal-thakkar

chart = new Highcharts.Chart({
... <my chart options go here>
...
});

...
chart.tooltip.refresh([chart.series[0].points[1]]);
chart.tooltip.hide = function () { };
chart.tooltip.hideCrosshairs = function () { };

Referring to my earlier post Here, I am facing problem with IE8 browser. The tooltip object is not found when I load the page first time. Then after refreshing the page, it starts working fine.

Am I missing any IE8 fix here? Wondering why it does not find the tooltip object only at first time!

Here is the Console Log in F12 on IE8:

'tooltip' is null or not an object

Answer 1

The tooltip object is not instantiated until the document.onreadystatechange is fired with a state of complete.

If you add the following to your code then it should defer attempting to raise the tooltip until it has been created

document.attachEvent('onreadystatechange', function () {
    if (document.readyState === 'complete') {
        chart.tooltip.refresh([chart.series[0].points[1]]);
        chart.tooltip.hide = function () { };
        chart.tooltip.hideCrosshairs = function () { };
    }
});