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?

Answer 1

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({ ... });