         .style("stroke-width", (link) => @y(link.value()))
 
       # then move the link labels and update their value
-      @links.transition().duration(500)
-        .selectAll("text.link_label")
-        .attr("y", (link) => @y link.right_y())
-        .text((d) => Metric.autoscale_value d.value(), 'PJ', 2)
+      @links.selectAll("path")
+        .attr('data-tooltip', (d) =>
+          html = "#{d.left.label()} -> #{d.right.label()}"
+          html += "<br/>"
+          html += Metric.autoscale_value d.value(), 'PJ', 2)
 
 class D3.sankey.NodeList extends Backbone.Collection
   model: D3.sankey.Node

        .transition()
        .duration(200)
        .style("opacity", selectedLinkOpacity)
        .selectAll(".link_label")
        .transition()
        .style("opacity", 0) # labels

    link_mouseover: ->
      current_id = $(this).parent().attr("data-cid")
      d3.selectAll(".link").
        each (d) ->
          item = d3.select(this)
          if d.cid == current_id
            item.selectAll(".link_label").transition().style("opacity", 1)
          else
            item.transition().duration(200).style("opacity", unselectedLinkOpacity)

    # this method is called every time we're updating the chart



    draw_links: =>
      # links are treated as a group
      links = @svg.selectAll('g.link')
        .data(@link_list.models, (d) -> d.cid)
        .enter()
