Adds Twitter Bootstrap tooltips

Twitter bootstrap tooltips for the lava flows, #3

coffee/eruptions.coffee

@@ -249,6 +249,10 @@
     @lavaLayer.data(boundingBox, lavaFiltered)
     @lavaLayer.draw()
     @map.refresh();
+    # activate tooltips on the body! (wouldn't work inside svg)
+    $(".lava-flow").tooltip
+      'container': 'body'
+      'placement': 'top'
 
 
   eruptionsBrushEnd: () =>

coffee/lavaLayer.coffee

@@ -104,18 +104,24 @@
       .attr("stroke", "red")
       .attr("stroke-width", 10)
       .attr("fill", "red")
-      .selectAll('title')
-        .text((d, i) ->
-          "lavaflow in #{d.date.getFullYear()}"
-        )
+      .attr("data-toggle", "tooltip")
+      .attr("title", (d, i) ->
+        "lavaflow in #{d.date.getFullYear()}"
+      )
+      .attr("class", "lava-flow")
+
+      # .selectAll('title')
+      #   .text((d, i) ->
+      #     "lavaflow in #{d.date.getFullYear()}"
+      #  )
 
 
   data: (boundingBox, flows) ->
     bounds = d3.geo.bounds(boundingBox)
     lava = mapDrawGroup.selectAll('path')
       .data(flows)
     lava.exit().remove().remove()
-    lava.enter().append('path').append('title')
+    lava.enter().append('path') #.append('title')
 
 
   # sets the visible map extension

css/barchart.css

@@ -49,3 +49,9 @@ circle {
 .lava-vec path {
   opacity: 0.2;
 }
+
+/* re-style bootstrap tooltips to be white */
+.tooltip .tooltip-inner {
+  background-color: #fff;
+  color: #000;
+}

index.html

@@ -16,6 +16,7 @@
     <script src="js/vendor/underscore.js"></script>
     <script src="js/vendor/vega.js"></script>
     <script src="js/vendor/scrollspy.js"></script>
+    <script src="js/vendor/bootstrap-tooltip.js"></script>
 
     <script src="js/templates.js"></script>
     <script src="js/eruptions.js"></script>

js/eruptions.js

@@ -271,7 +271,11 @@ this.etna.eruptionsChart = (function() {
       _this.circleLayer.draw();
       _this.lavaLayer.data(boundingBox, lavaFiltered);
       _this.lavaLayer.draw();
-      return _this.map.refresh();
+      _this.map.refresh();
+      return $(".lava-flow").tooltip({
+        'container': 'body',
+        'placement': 'top'
+      });
     },
     eruptionsBrushEnd: function() {
       var airport, airportShutdowns, ashFalls, crater, craterExplosions, dataFiltered, datum, destroyed, destroyedTown, earthquakeTown, earthquakes, town, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _len5, _m, _n, _ref, _ref1, _ref2, _ref3, _ref4;

js/lavaLayer.js

@@ -84,16 +84,16 @@ this.etna.lavaLayer = function(map, mapDrawSvg, mapDrawGroup) {
           default:
             return "M 0 0 L 0 0";
         }
-      }).attr("stroke", "red").attr("stroke-width", 10).attr("fill", "red").selectAll('title').text(function(d, i) {
+      }).attr("stroke", "red").attr("stroke-width", 10).attr("fill", "red").attr("data-toggle", "tooltip").attr("title", function(d, i) {
         return "lavaflow in " + (d.date.getFullYear());
-      });
+      }).attr("class", "lava-flow");
     },
     data: function(boundingBox, flows) {
       var bounds, lava;
       bounds = d3.geo.bounds(boundingBox);
       lava = mapDrawGroup.selectAll('path').data(flows);
       lava.exit().remove().remove();
-      return lava.enter().append('path').append('title');
+      return lava.enter().append('path');
     },
     extent: function() {
       return new MM.Extent(new MM.Location(bounds[0][1], bounds[0][0]), new MM.Location(bounds[1][1], bounds[1][0]));