svg - Tipsy tooltip positioning on d3 in firefox, IE

Question

I'm drawing d3 line graphs and tipsy tooltips attached to the circles.

The tooltips work fine in Chrome/Safari but in Firefox and IE when you hover over a point, while the respective tooltip does appear, it shows up outside the graph/SVG element in the top left hand corner of the screen (html element) instead of next to the point.

This is how I'm attaching the tooltip:

    jQuery('g circle').tipsy({
        gravity: 'w', 
        html: true,
        title: function() {
            return this.textContent;
        }
    })

Any advice on what I'm doing wrong would be much appreciated.

Answer 1

This patch adds proper SVG support to Tipsy.