         attr("transform", "translate(#{@margin.left}, #{@margin.top})")
       @links = @draw_links()
       @nodes = @draw_nodes()
-      $("g.node").tipsy
-        gravity: 'sw'
+      $("g.node").qtip
+        content:
+          text: -> $(this).attr('title')
+        show:
+          event: 'mouseover' # silly IE
+        hide:
+          event: 'mouseout'  # silly IE
 
 
     draw_links: =>

        attr("x", (d) => @x(horizontal_spacing * d.get('column'))).
        attr("y", (d) => @y(d.y_offset())).
        attr("fill", (d, i) -> d.get('color') || colors(i)).
        attr("stroke", (d, i) -> d3.rgb(d.get('color') || colors(i)).darker(2)).
        attr("width", (d) => @x width).
        attr("height", (d) => @y d.value())


D3.sankey =
  data :
    nodes: [

      {id: 'coal_and_derivatives',     column: 0, label: "coal", color: 'yellow'},
      {id: 'oil_and_derivatives',        column: 0, label: "oil"},
      #{id: 'useful_demand',         column: 0},
