diff --git a/css/app.css b/css/app.css index e5d04b365..bb86b3c74 100644 --- a/css/app.css +++ b/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 ------------------------------------------------------- */ diff --git a/js/id/operations/circular.js b/js/id/operations/circular.js index 0af64aa20..d5d449853 100644 --- a/js/id/operations/circular.js +++ b/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; }; diff --git a/js/id/operations/delete.js b/js/id/operations/delete.js index 53038dbc4..42fb2034c 100644 --- a/js/id/operations/delete.js +++ b/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; }; diff --git a/js/id/operations/move.js b/js/id/operations/move.js index 9806ede67..ca0f0f65b 100644 --- a/js/id/operations/move.js +++ b/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; }; diff --git a/js/id/operations/reverse.js b/js/id/operations/reverse.js index 941d8a4da..44763502e 100644 --- a/js/id/operations/reverse.js +++ b/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; }; diff --git a/js/id/operations/split.js b/js/id/operations/split.js index 838dac88e..3e298f133 100644 --- a/js/id/operations/split.js +++ b/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; }; diff --git a/js/id/operations/unjoin.js b/js/id/operations/unjoin.js index 985a41697..e4275eff8 100644 --- a/js/id/operations/unjoin.js +++ b/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; }; diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js index 72de946d1..136657dbc 100644 --- a/js/id/ui/radial_menu.js +++ b/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(); }