From 4c45ab1787f0a79f96e868e1026f1fae555ab1bf Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Mon, 11 Mar 2013 17:52:49 -0400
Subject: [PATCH] Operation tooltips are absolutely positioned

---
 css/app.css             |  3 +++
 js/id/ui/radial_menu.js | 21 ++++++---------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/css/app.css b/css/app.css
index 407f41594..57a0ff512 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1755,6 +1755,9 @@ a.success-action {
 
 .radial-menu-tooltip {
     background-color: rgba(255, 255, 255, 0.8);
+    display: none;
+    position: absolute;
+    width: 200px;
 }
 
 .radial-menu-background {
diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js
index 4f7d5a7b5..3a6e3314c 100644
--- a/js/id/ui/radial_menu.js
+++ b/js/id/ui/radial_menu.js
@@ -57,13 +57,9 @@ iD.ui.RadialMenu = function(operations) {
             .attr('clip-path', 'url(#clip-square-20)')
             .attr('xlink:href', function(d) { return '#icon-operation-' + d.id; });
 
-        var tooltip = menu.append('foreignObject')
-            .style('display', 'none')
-            .attr('width', 200)
-            .attr('height', 400);
-
-        tooltip.append('xhtml:div')
-            .attr('class', 'radial-menu-tooltip tooltip-inner');
+        var tooltip = d3.select(document.body)
+            .append('div')
+            .attr('class', 'tooltip-inner radial-menu-tooltip');
 
         function mouseover(d, i) {
             var angle = a0 + i * a,
@@ -71,15 +67,10 @@ iD.ui.RadialMenu = function(operations) {
                 dy = 0;
 
             tooltip
-                .attr('x', (r + 25) * Math.sin(angle) + dx)
-                .attr('y', (r + 25) * Math.cos(angle) + dy)
+                .style('left', (r + 25) * Math.sin(angle) + dx + center[0] + 'px')
+                .style('top', (r + 25) * Math.cos(angle) + dy + center[1]+ 'px')
                 .style('display', 'block')
-                .select('div')
-                .text(d.description + ' ')
-                .append('span')
-                    .style('position', 'static')
-                    .attr('class', 'keyhint')
-                    .text(d.keys[0]);
+                .html(iD.ui.tooltipHtml(d.description, d.keys[0]));
         }
 
         function mouseout() {