6

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.

eva
  • 61
  • 3

2 Answers2

4

This patch adds proper SVG support to Tipsy.

meunierd
  • 381
  • 4
  • 14
1

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • There is already a fork of tipsy that provides support for svg elements: https://groups.google.com/forum/?fromgroups=#!topic/d3-js/Y3KBIg16xEg – methodofaction Sep 04 '12 at 22:18