Here's a quick post to explain the issue (which the Highcharts folks know about and may already be fixing), and how to remedy it.

First a little about the problem and why it exists.  Lets say you've implemented Highcharts and you're pretty happy with it so far, but decide it's time to verify the thing works in IE7/8/9.



That's unusual, IE is the only browser that isn't working right? What's going on here?  It's that same old story, IE fell down and we're left trying to figure out a workaround. The cause? IE has not refreshed the display since the tooltip moved leaving several artifacts on the chart.  If you click the mouse, alt-tab, pop an alert, or do a variety of "fixes" you'll find around the web, you might get it to work most of the time. But that's simply not good enough for most of us.

The solution is fairly simple, but you'll have to edit the highcharts source code in 2 places.

First, we're going to add an option to the tooltip object which will allow you to turn tooltip animations on or off.

Find this section in the highcharts.src.js:

    /**
     * The tooltip object
     * @param {Object} options Tooltip options
     */
    function Tooltip(options) {
        var currentSeries,
            borderWidth = options.borderWidth,
            crosshairsOptions = options.crosshairs,
            crosshairs = [],
            style = options.style,
            shared = options.shared,
            padding = pInt(style.padding),
            tooltipIsHidden = true,
            currentX = 0,
            currentY = 0;

Add a new option, lets call it "animate" and make the default true so it won't break anything, you know, just in case someone else has to come pick up your code later and they can't figure out why the tooltip isn't animating.

    /**
     * The tooltip object
     * @param {Object} options Tooltip options
     */
    function Tooltip(options) {
        var currentSeries,
            borderWidth = options.borderWidth,
            crosshairsOptions = options.crosshairs,
            crosshairs = [],
            style = options.style,
            shared = options.shared,
            padding = pInt(style.padding),
            tooltipIsHidden = true,
            currentX = 0,
            currentY = 0,
            animate = true;

So now there's an option flag for animate, all done right? No, you'll need to make use of it. Next, locate this section of code, around line 7424:

        /**
         * Provide a soft movement for the tooltip
         *
         * @param {Number} finalX
         * @param {Number} finalY
         */
        function move(finalX, finalY) {

Add an if statement to check the new option, (or just replace the entire move() function as shown:

        /**
         * Provide a soft movement for the tooltip
         *
         * @param {Number} finalX
         * @param {Number} finalY
         */
        function move(finalX, finalY) {

                        // if tooltip animation is enabled
                        if (options.animation) {

                            // get intermediate values for animation
                            currentX = tooltipIsHidden ? finalX : (2 * currentX + finalX) / 3;
                            currentY = tooltipIsHidden ? finalY : (currentY + finalY) / 2;

                            // move to the intermediate value
                            label.attr({ x: currentX, y: currentY });

                            // run on next tick of the mouse tracker
                            if (mathAbs(finalX - currentX) > 1 || mathAbs(finalY - currentY) > 1) {
                                    tooltipTick = function () {
                                            //sally console.log()
                                            move(finalX, finalY);
                                    };
                            } else {
                                    tooltipTick = null;
                            }
                        } else {
                            // animation disabled, just move to the final position
                            label.attr({ x: finalX, y: finalY });
                        }
        }

That's it, now you can disable animations like so:

chart = new Highcharts.Chart({
    tooltip: { 
        useHTML: true,
        backgroundColor: '#ffffff',
        crosshairs: true,
        enabled: true,
        animation:false
        }
    });

Of if you want to just disable it for IE:

chart = new Highcharts.Chart({
    tooltip: { 
        useHTML: true,
        backgroundColor: '#ffffff',
        crosshairs: true,
        enabled: true,
        animation: ('msie' in jQuery.browser) ? false : true
        }
    });

Lets check the chart in IE again:

Much better!

Too Complex?