From 258adb6967ffccb5ad738d37deaa796bdfbdc27c Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Mon, 25 Mar 2013 17:29:36 -0400
Subject: [PATCH] better intro tooltip positioning

---
 css/intro.css        | 16 +++++++++++++++-
 js/lib/d3.curtain.js |  9 ++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/css/intro.css b/css/intro.css
index d9b060aa6..3bfebc6c0 100644
--- a/css/intro.css
+++ b/css/intro.css
@@ -19,12 +19,26 @@
 }
 
 .intro-nav-wrap button.step.finished {
-    background: #74C574;
+    background: #76FF70;
+}
+
+.intro-nav-wrap button.step.finished h3 {
+    color: #269C21;
 }
 
 .intro-nav-wrap button.step h3 {
     font-weight: normal;
 }
+
+.curtain-tooltip.left .tooltip-arrow,
+.curtain-tooltip.right .tooltip-arrow {
+    top: 0;
+}
+
+.curtain-tooltip.right .tooltip-inner,
+.curtain-tooltip.left .tooltip-inner {
+    margin-top: -50%;
+}
 .curtain-tooltip .tooltip-inner {
     font-size: 14px;
     font-weight: normal;
diff --git a/js/lib/d3.curtain.js b/js/lib/d3.curtain.js
index 5db13c25e..5c4b60880 100644
--- a/js/lib/d3.curtain.js
+++ b/js/lib/d3.curtain.js
@@ -82,10 +82,10 @@ d3.curtain = function() {
             pos = [box.left + box.width / 2 - twidth / 2, box.top + box.height];
         } else if (box.left + box.width + 300 < window.innerWidth) {
             side = 'right';
-            pos = [box.left + box.width, box.top, 10];
+            pos = [box.left + box.width, box.top + box.height / 2];
         } else if (box.left > 300) {
             side = 'left';
-            pos = [box.left - 200, Math.max(box.top, 10)];
+            pos = [box.left - 200, box.top + box.height / 2];
         } else {
             side = 'bottom';
             pos = [box.left, box.top + box.height];
@@ -102,11 +102,14 @@ d3.curtain = function() {
         if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';
 
 
-        tooltip.attr('class', 'curtain-tooltip tooltip in ' + side)
+        tooltip
             .style('top', pos[1] + 'px')
             .style('left', pos[0] + 'px')
+            .attr('class', 'curtain-tooltip tooltip in ' + side)
             .select('.tooltip-inner')
                 .html(html);
+
+        if (duration !== 0) tooltip.call(iD.ui.Toggle(true));
     };
 
     curtain.cut = function(data, duration) {