         .attr("transform", "translate(#{@width - 15}, 0)")
         .call(@y_axis)
 
+      # series tooltips
+      $('path.serie').qtip
+        content:
+          title: -> $(this).attr('data-title')
+          text: -> $(this).attr('data-tooltip')
+        show:
+          event: 'mouseover' # silly IE
+        hide:
+          event: 'mouseout'  # silly IE
+        position:
+          target: 'mouse'
+          my: 'bottom right'
+          at: 'top center'
+        style:
+          classes: "ui-tooltip-bootstrap"
+
     refresh: =>
       # calculate tallest column
       tallest = Math.max(

        .data(stacked_data, (s) -> s.key)
        .transition()
        .attr('d', (d) => @area d.values)

    # We need to pass the chart series through the stacking function and the SVG
    # area function. To do this let's format the data as an array. An

        left_stack += s.safe_present_value()
        right_stack += s.safe_future_value()

        gquery = s.get 'gquery_key'

        mid_year = (@start_year + @end_year) / 2

        out = [
          {
            x: @start_year
            y: s.safe_present_value()
            id: gquery
            color: s.get('color')
            label: s.get('label')
          },
          {
            x: mid_year
            y: mid_point
            id: gquery
            color: s.get('color')
          },
          {
            x: @end_year
            y: s.safe_future_value()
            id: gquery
            color: s.get('color')
          }
        ]
