Mouseover previews of feature names

css/app.css

@@ -96,6 +96,13 @@ table td {
     margin:0;
 }
 
+#bar .messages {
+    position:absolute;
+    right:200px;
+    top:0;
+    padding:10px;
+}
+
 #bar button:hover {
     background:#eee;
 }

index.html

@@ -17,6 +17,7 @@
                 +&nbsp;Area</button><button class='mini' id='undo'>
                 &larr;<small></small></button><button class='mini' id='redo'>
                 &rarr;</button><input type='text' id='geocode-location' placeholder='find a place' />
+                <div class='messages'></div>
                 <button id='save'>Save</button>
                 <div class='zoombuttons'>
                     <button class='zoom-in'>+</button><button class='zoom-out'>&ndash;</button>

js/iD/renderer/Map.js

@@ -55,6 +55,9 @@ iD.Map = function(elem) {
         },
         key = function(d) { return d.id; };
 
+    d3.select('.inspector-wrap').style('display', 'none');
+    var messages = d3.select('.messages');
+
     // Containers
     // ----------
     // The map uses SVG groups in order to restrict
@@ -161,6 +164,8 @@ iD.Map = function(elem) {
         var marker = markers.enter().append('g')
             .attr('class', 'marker')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .call(dragbehavior);
         marker.append('circle')
             .attr({ r: 10, cx: 8, cy: 8 });
@@ -181,6 +186,8 @@ iD.Map = function(elem) {
         strokes.exit().remove();
         strokes.enter().append('path')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .attr('class', class_stroke)
             .classed('active', classActive);
         strokes.order()
@@ -195,6 +202,8 @@ iD.Map = function(elem) {
         casings.exit().remove();
         casings.enter().append('path')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .attr('class', class_casing)
             .classed('active', classActive);
         casings.order()