First shot at tooltips cc @samanbb

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;
+}

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>

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});

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')

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;
+};