Why is using Tipsy breaking my force-directed graph produced by d3?

Question

I am trying to add Tipsy hover-over popups to my simple force-directed graph of 3 nodes.

However, adding the Tipsy javascript seems to crash my javascript: http://goo.gl/BeYls

Chrome Web Developer Console notes:

Uncaught TypeError: Object [object SVGCircleElement],[object SVGCircleElement],[object SVGCircleElement] has no method 'tipsy'

I am sure that the rest of the application without the Tipsy code works (since taking out lines 78-85 fixes the app), and I have included the javascript files.

Specifically, here is the code I wrote to add Tipsy popups to each node in the DOM.

  node.tipsy({  
    gravity: 'w', 
    html: true, 
    title: function() {
    var d = this.__data__, n = d.name;
        return 'Hi there! My name is <b>' + n + '</b>'; 
    }
  });

Why is it breaking? Is node not a DOM element?

Isn't tipsy a jQuery plugin? In which case you would have to wrap the node in a jQuery function call: $(node) — aefxx, Apr 14 '12 at 23:13

score 3 · Accepted Answer · answered Apr 14 '12 at 23:16

3

Tipsy is a jquery plugin. You need to apply it on jquery selectors, not d3 selectors. Since your circles have the css class 'node', this should work:

$(".node").tipsy({ ... });

answered Apr 14 '12 at 23:16

Lars Grammel

1,999
16
21

Thank you, that did the trick! It makes sense that the object should be a selector returned by the jQuery factory function. – dangerChihuahua007 Apr 14 '12 at 23:27

Why is using Tipsy breaking my force-directed graph produced by d3?

1 Answers1