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.

Cady

Answer 1

This patch adds proper SVG support to Tipsy.

Binominal

Answer 2

tipsy uses offsetWidth and offsetHeight on elements. It assumes that such things work on SVG elements, unfortunately that assumption is incorrect outside of Chrome/Safari.

The CSSOM specification says that offsetWidth/offsetHeight are html element properties. It seems that Chrome/Safari have put these on their SVG elements but there's no specification that says that that should be the case.

You'll either need to fix tipsy to be cross-browser or get the author to do it. Using getTransformToElement and/or getBBox is probably what's needed.

Seiden

There is already a fork of tipsy that provides support for svg elements: groups.google.com/forum/?fromgroups=#!topic/d3-js/Y3KBIg16xEg – Barron