From bf29581ae1d4cfb90eb8c6a02883abdc2cbd32a6 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Wed, 5 Dec 2012 16:13:09 -0500
Subject: [PATCH] Add tooltips to action buttons

---
 css/app.css                 | 3 +++
 js/id/id.js                 | 2 ++
 js/id/modes/add_area.js     | 3 ++-
 js/id/modes/add_place.js    | 3 ++-
 js/id/modes/add_road.js     | 3 ++-
 js/lib/bootstrap-tooltip.js | 2 +-
 6 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/css/app.css b/css/app.css
index 8f17d668a..438218e6c 100644
--- a/css/app.css
+++ b/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;
diff --git a/js/id/id.js b/js/id/id.js
index 87a6b40f1..84280568f 100644
--- a/js/id/id.js
+++ b/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) {
diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js
index ae7acf6af..1f4832738 100644
--- a/js/id/modes/add_area.js
+++ b/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() {
diff --git a/js/id/modes/add_place.js b/js/id/modes/add_place.js
index 87978647a..633d88aea 100644
--- a/js/id/modes/add_place.js
+++ b/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() {
diff --git a/js/id/modes/add_road.js b/js/id/modes/add_road.js
index 32a6a7f4e..5887959fd 100644
--- a/js/id/modes/add_road.js
+++ b/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() {
diff --git a/js/lib/bootstrap-tooltip.js b/js/lib/bootstrap-tooltip.js
index 8cdf669d5..5ade4b300 100644
--- a/js/lib/bootstrap-tooltip.js
+++ b/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;
       }