From eecc6b14fb7ded90c9ed79127ab7dc88fcecedf7 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Wed, 16 Jan 2013 18:39:12 -0500
Subject: [PATCH] First shot at tooltips cc @samanbb

---
 css/app.css              | 15 ++++++++++---
 index.html               |  1 +
 js/id/modes/add_point.js |  2 +-
 js/id/renderer/map.js    | 10 ++++++++-
 js/lib/d3.tooltip.js     | 46 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 js/lib/d3.tooltip.js

diff --git a/css/app.css b/css/app.css
index 4aba98318..cafe19774 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1044,7 +1044,16 @@ div.typeahead a:first-child {
 }
 
 .Browse .tooltip .tooltip-arrow {
-    left: 30px;
-    }
-
+  left: 30px;
+}
 
+.mouse-tooltip {
+  opacity:0.5;
+  background :#fff;
+  margin-left: 20px;
+  margin-top: -15px;
+  padding:5px;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
diff --git a/index.html b/index.html
index b106c35b7..08c23a46b 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
         <script src='js/lib/d3.size.js'></script>
         <script src='js/lib/d3.trigger.js'></script>
         <script src='js/lib/d3.keybinding.js'></script>
+        <script src='js/lib/d3.tooltip.js'></script>
         <script src='js/lib/d3-compat.js'></script>
         <script src='js/lib/queue.js'></script>
         <script src='js/lib/bootstrap-tooltip.js'></script>
diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js
index 37767f3de..4936f1578 100644
--- a/js/id/modes/add_point.js
+++ b/js/id/modes/add_point.js
@@ -10,7 +10,7 @@ iD.modes.AddPoint = function() {
             history = mode.history,
             controller = mode.controller;
 
-        map.hint('Click on the map to add a point.');
+        map.tooltip('Click on the map to add a point.');
 
         map.surface.on('click.addpoint', function() {
             var node = iD.Node({loc: map.mouseCoordinates(), _poi: true});
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 9bb695747..7d3bd8a2a 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -21,6 +21,7 @@ iD.Map = function() {
         lines = iD.svg.Lines(),
         areas = iD.svg.Areas(),
         midpoints = iD.svg.Midpoints(),
+        tooltip = d3.tooltip(),
         surface, tilegroup;
 
     function map(selection) {
@@ -32,7 +33,8 @@ iD.Map = function() {
             .on('mousedown.drag', function() {
                 translateStart = projection.translate();
             })
-            .call(zoom);
+            .call(zoom)
+            .call(tooltip);
 
         surface = supersurface.append('svg')
             .on('mouseup.reset-transform', resetTransform)
@@ -281,6 +283,12 @@ iD.Map = function() {
         return map;
     };
 
+    map.tooltip = function (_) {
+        if (_ === false) tooltip.off();
+        else tooltip.text(_);
+        return map;
+    };
+
     map.hint = function (_) {
         if (_ === false) {
             d3.select('div.inspector-wrap')
diff --git a/js/lib/d3.tooltip.js b/js/lib/d3.tooltip.js
new file mode 100644
index 000000000..1be658038
--- /dev/null
+++ b/js/lib/d3.tooltip.js
@@ -0,0 +1,46 @@
+d3.tooltip = function() {
+    var text, on = false, container, tooltip_size, container_size,
+        transformProp = iD.util.prefixCSSProperty('Transform');
+
+    var tooltip = function(selection) {
+        function setup() {
+            var rect = selection.node().getBoundingClientRect();
+            container = d3.select(document.body)
+                .append('div').attr('class', 'mouse-tooltip')
+                .style({
+                    position: 'absolute'
+                });
+
+            selection
+                .on('mousemove.tooltip', mousemove);
+
+            container_size = container.size();
+        }
+
+        function mousemove() {
+            if (!on) return;
+            container.style(transformProp, 'translate(' +
+                ~~d3.event.x + 'px,' +
+                ~~d3.event.y + 'px)');
+        }
+
+        if (!container) setup();
+    };
+
+    tooltip.text = function(_) {
+        if (_ === false) {
+            on = false;
+            container.style('display', 'none');
+            return tooltip;
+        } else if (container.style('display') == 'none') {
+            container.style('display', 'block');
+        }
+        on = true;
+        text = _;
+        container.text(text);
+        size = container.size();
+        return tooltip;
+    };
+
+    return tooltip;
+};