Add tooltips to action buttons

css/app.css

@@ -350,6 +350,9 @@ div.typeahead a.active {
     -webkit-touch-callout:none;
 }
 
+#bar button .tooltip {
+  white-space: normal;
+  }
 .tooltip {
   position: absolute;
   z-index: 1030;

js/id/id.js

@@ -33,6 +33,8 @@ window.iD = function(container) {
             .enter().append('button')
                 .attr('class', 'add-button')
             .text(function (mode) { return mode.title; })
+            .attr('data-original-title', function (mode) { return mode.description; })
+            .call(bootstrap.tooltip().placement('bottom'))
             .on('click', function (mode) { controller.enter(mode); });
 
         controller.on('enter', function (entered) {

js/id/modes/add_area.js

@@ -1,7 +1,8 @@
 iD.modes.AddArea = function() {
     var mode = {
         id: 'add-area',
-        title: '+ Area'
+        title: '+ Area',
+        description: 'Add parks, buildings, lakes, or other areas to the map.'
     };
 
     mode.enter = function() {

js/id/modes/add_place.js

@@ -1,7 +1,8 @@
 iD.modes.AddPlace = function() {
     var mode = {
         id: 'add-place',
-        title: '+ Place'
+        title: '+ Place',
+        description: 'Restaurants, monuments, and postal boxes are points.'
     };
 
     mode.enter = function() {

js/id/modes/add_road.js

@@ -1,7 +1,8 @@
 iD.modes.AddRoad = function() {
     var mode = {
         id: 'add-road',
-        title: '+ Road'
+        title: '+ Road',
+        description: 'Roads can be highways, streets, pedestrian paths, or even canals'
     };
 
     mode.enter = function() {

js/lib/bootstrap-tooltip.js

@@ -125,7 +125,7 @@
           pos = {x: outer.x - inner.w, y: outer.y + (outer.h - inner.h) / 2};
           break;
         case "bottom":
-          pos = {x: outer.x + (outer.w - inner.w) / 2, y: outer.y + outer.h};
+          pos = {x: Math.max(0, outer.x + (outer.w - inner.w) / 2), y: outer.y + outer.h};
           break;
       }