Tooltip useHTML=true doesn't fadeOut

[tjhiggins]

The tooltip html is just hidden as opposed to fading out like its svg counterpart. Can be ugly if you use svg tooltip background in tandem with html content.

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/fullhtml/

[pawelfus]

Workaround: http://jsfiddle.net/71c56zx9/1/

And required snippet:

(function (H, HA) {
    H.wrap(H.SVGElement.prototype, 'show', function (p, inherit) {
        if (this.div) {
            HA.animate(this.div, {
                opacity: 1
            }, {
                duration: 0
            });
        }
        return p.call(this, inherit);
    });

    H.wrap(H.SVGElement.prototype, 'fadeOut', function (p, duration) {
        var elemWrapper = this;
        elemWrapper.animate({
            opacity: 0
        }, {
            duration: H.pick(duration, 150),
            complete: function () {
                elemWrapper.hide(); // #3088, assuming we're only using this for tooltips
            }
        });
        if (elemWrapper.div) {
            HA.animate(elemWrapper.div, {
                opacity: 0
            }, {
                duration: H.pick(duration, 150)
            });
        }
    });
})(Highcharts, HighchartsAdapter)

Internal note:
A bit connected to the #3088 - we can revert #3088, if we will manage wrapper.div element separately (by showing/hiding that element, instead of translating parent). As for example, see snippet above. Of course, in the fix, we can use css() for show, but for the workaround purposes I'm using animate() in show - css() is encapsulated and not available in Facade.js.

[TorsteinHonsi]

@pawelfus Resolved this by adding an opacitySetter to the HTML element. Animation hooks up to it.

[pawelfus]

That's cool, thanks!