Futuristic radial menu tooltips

css/app.css

@@ -1209,6 +1209,14 @@ a.success-action {
     pointer-events: none;
 }
 
+.radial-menu-tooltip {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 5px;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+}
+
 /* Media Queries
 ------------------------------------------------------- */
 

js/id/operations/circular.js

@@ -29,6 +29,7 @@ iD.operations.Circular = function(entityId, mode) {
 
     operation.id = "circular";
     operation.title = "Circular";
+    operation.description = "Make this round";
 
     return operation;
 };

js/id/operations/delete.js

@@ -37,6 +37,7 @@ iD.operations.Delete = function(entityId) {
 
     operation.id = "delete";
     operation.title = "Delete";
+    operation.description = "Remove this from the map";
 
     return operation;
 };

js/id/operations/move.js

@@ -13,6 +13,7 @@ iD.operations.Move = function(entityId, mode) {
 
     operation.id = "move";
     operation.title = "Move";
+    operation.description = "Move this to a different location";
 
     return operation;
 };

js/id/operations/reverse.js

@@ -16,6 +16,7 @@ iD.operations.Reverse = function(entityId) {
 
     operation.id = "reverse";
     operation.title = "Reverse";
+    operation.description = "Make this way go in the opposite direction";
 
     return operation;
 };

js/id/operations/split.js

@@ -16,6 +16,7 @@ iD.operations.Split = function(entityId) {
 
     operation.id = "split";
     operation.title = "Split";
+    operation.description = "Split this into two ways at this point";
 
     return operation;
 };

js/id/operations/unjoin.js

@@ -16,6 +16,7 @@ iD.operations.Unjoin = function(entityId) {
 
     operation.id = "unjoin";
     operation.title = "Unjoin";
+    operation.description = "Disconnect these ways from each other";
 
     return operation;
 };

js/id/ui/radial_menu.js

@@ -1,5 +1,5 @@
 iD.ui.RadialMenu = function(entity, mode) {
-    var arcs;
+    var menu;
 
     var radialMenu = function(selection, center) {
         var history = mode.map.history(),
@@ -13,12 +13,12 @@ iD.ui.RadialMenu = function(entity, mode) {
             operation(history);
         }
 
-        arcs = selection.append('g')
+        menu = selection.append('g')
             .attr('class', 'radial-menu')
             .attr('transform', "translate(" + center + ")")
             .attr('opacity', 0);
 
-        arcs.transition()
+        menu.transition()
             .attr('opacity', 0.8);
 
         var r = 50,
@@ -26,7 +26,7 @@ iD.ui.RadialMenu = function(entity, mode) {
             a0 = -Math.PI / 4,
             a1 = a0 + (operations.length - 1) * a;
 
-        arcs.append('path')
+        menu.append('path')
             .attr('class', 'radial-menu-background')
             .attr('d', 'M' + r * Math.sin(a0) + ',' +
                              r * Math.cos(a0) +
@@ -36,7 +36,7 @@ iD.ui.RadialMenu = function(entity, mode) {
             .attr('stroke-width', 50)
             .attr('stroke-linecap', 'round');
 
-        var button = arcs.selectAll()
+        var button = menu.selectAll()
             .data(operations)
             .enter().append('g')
             .attr('transform', function(d, i) {
@@ -58,11 +58,36 @@ iD.ui.RadialMenu = function(entity, mode) {
             .attr('height', 16)
             .attr('transform', 'translate(-8, -8)')
             .attr('xlink:href', 'icons/helipad.png');
+
+        var tooltip = menu.append('foreignObject')
+            .style('display', 'none')
+            .attr('width', 200)
+            .attr('height', 400);
+
+        tooltip.append('xhtml:div')
+            .attr('class', 'radial-menu-tooltip');
+
+        function mouseover(d, i) {
+            var angle = a0 + i * a,
+                dx = angle < 0 ? -200 : 0,
+                dy = 0;
+
+            tooltip
+                .attr('x', (r + 30) * Math.sin(angle) + dx)
+                .attr('y', (r + 30) * Math.cos(angle) + dy)
+                .style('display', 'block')
+                .select('div')
+                .text(d.description);
+        }
+
+        function mouseout() {
+            tooltip.style('display', 'none');
+        }
     };
 
     radialMenu.close = function(selection) {
-        if (arcs) {
-            arcs.transition()
+        if (menu) {
+            menu.transition()
                 .attr('opacity', 0)
                 .remove();
         }