From 14fe7b992083ca07ed4f0166c9a53029796887f6 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Sat, 20 Jan 2018 01:15:02 +0800
Subject: [PATCH 1/3] Add tooltipText param to tooltip module and move tooltip
 to the left and make it wider

---
 src/app/ui/copy-to-clipboard.js |  2 +-
 src/app/ui/tooltip.js           | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/ui/copy-to-clipboard.js b/src/app/ui/copy-to-clipboard.js
index 8588d2cdd0..869dfd53c5 100644
--- a/src/app/ui/copy-to-clipboard.js
+++ b/src/app/ui/copy-to-clipboard.js
@@ -29,7 +29,7 @@ module.exports = function copyToClipboard (getContent) {
         }
       } catch (e) {}
       copy(copiableContent)
-      addTooltip(event)
+      addTooltip(event, 'Successfully copied!')
     }
   }
   return copyIcon
diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
index 388d53dcc1..05cc60b672 100644
--- a/src/app/ui/tooltip.js
+++ b/src/app/ui/tooltip.js
@@ -7,11 +7,11 @@ var styles = styleGuide.chooser()
 var css = csjs`
   .tooltip {
     visibility: hidden;
-    width: 100px;
+    width: 175px;
     background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
     color: ${styles.remix.tooltip_CopyToClipboard_Color};
     font-weight: bold;
-    font-size: 12px;
+    font-size: 10px;
     text-transform: initial;
     text-align: center;
     border-radius: 3px;
@@ -20,7 +20,7 @@ var css = csjs`
     z-index: 1;
     bottom: 160%;
     left: 100%;
-    margin-left: -60px;
+    margin-left: -150px;
     opacity: 0;
     transition: opacity 1s;
   }
@@ -28,7 +28,7 @@ var css = csjs`
       content: "";
       position: absolute;
       top: 100%;
-      left: 50%;
+      right: 10%;
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
@@ -36,10 +36,10 @@ var css = csjs`
   }
 `
 
-module.exports = function addTooltip (event) {
+module.exports = function addTooltip (event, tooltipText) {
   var icon = event.target
   icon.style.position = 'relative'
-  var tooltip = yo`<div class=${css.tooltip}>Copied!</div>`
+  var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>`
   icon.appendChild(tooltip)
   var copiedToolbox = event.target.children[0]
   copiedToolbox.style.visibility = 'visible'

From 2089547cb351eb4d1d458f886d1096119a08b45f Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 23 Jan 2018 02:25:40 +0800
Subject: [PATCH 2/3] Reposition tooltip on the bottom

---
 src/app/ui/tooltip.js | 59 ++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
index 05cc60b672..93c6b7c08a 100644
--- a/src/app/ui/tooltip.js
+++ b/src/app/ui/tooltip.js
@@ -6,46 +6,41 @@ var styles = styleGuide.chooser()
 
 var css = csjs`
   .tooltip {
-    visibility: hidden;
-    width: 175px;
+    z-index: 1001;
+    display: inline-block;
+    position: fixed;
     background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
     color: ${styles.remix.tooltip_CopyToClipboard_Color};
-    font-weight: bold;
-    font-size: 10px;
-    text-transform: initial;
-    text-align: center;
+    min-height: 50px;
+    min-width: 290px;
+    padding: 16px 24px 12px;
     border-radius: 3px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 160%;
-    left: 100%;
-    margin-left: -150px;
-    opacity: 0;
-    transition: opacity 1s;
+    bottom: -300;
+    left: 40%;
+    font-size: 12px;
+    -webkit-animation-name: animatebottom;
+    -webkit-animation-duration: 6s;
+    animation-name: animatebottom;
+    animation-duration: 6s
   }
-  .tooltip::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      right: 10%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor} transparent transparent transparent;
+  @-webkit-keyframes animatebottom {
+    0% {bottom: -300px; opacity: 0}
+    20% {bottom: 0; opacity: 0.8}
+    50% {bottom: 0; opacity: 1}
+    100% {bottom: -300px; opacity: 0}
+  }
+  @keyframes animatebottom {
+    0% {bottom: -300px; opacity: 0}
+    20% {bottom: 0; opacity: 0.8}
+    50% {bottom: 0; opacity: 1}
+    100% {bottom: -300px; opacity: 0} 1}
   }
 `
 
 module.exports = function addTooltip (event, tooltipText) {
-  var icon = event.target
-  icon.style.position = 'relative'
   var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>`
-  icon.appendChild(tooltip)
-  var copiedToolbox = event.target.children[0]
-  copiedToolbox.style.visibility = 'visible'
-  copiedToolbox.style.opacity = 1
+  document.body.appendChild(tooltip)
   setTimeout(function () {
-    copiedToolbox.style.visibility = 'hidden'
-    copiedToolbox.style.opacity = 0
-  }, 1000)
+    document.body.removeChild(tooltip)
+  }, 7000)
 }

From 474e621ad20bdc92eef84e2093c87d90c847ee4a Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 23 Jan 2018 02:34:48 +0800
Subject: [PATCH 3/3] Fixed styling

---
 src/app/ui/tooltip.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
index 93c6b7c08a..0f58d70ae1 100644
--- a/src/app/ui/tooltip.js
+++ b/src/app/ui/tooltip.js
@@ -18,22 +18,23 @@ var css = csjs`
     bottom: -300;
     left: 40%;
     font-size: 12px;
+    text-align: center;
     -webkit-animation-name: animatebottom;
     -webkit-animation-duration: 6s;
     animation-name: animatebottom;
     animation-duration: 6s
   }
-  @-webkit-keyframes animatebottom {
-    0% {bottom: -300px; opacity: 0}
-    20% {bottom: 0; opacity: 0.8}
-    50% {bottom: 0; opacity: 1}
-    100% {bottom: -300px; opacity: 0}
+  @-webkit-keyframes animatebottom  {
+    0% {bottom: -300px}
+    20% {bottom: 0}
+    50% {bottom: 0}
+    100% {bottom: -300px}
   }
-  @keyframes animatebottom {
-    0% {bottom: -300px; opacity: 0}
-    20% {bottom: 0; opacity: 0.8}
-    50% {bottom: 0; opacity: 1}
-    100% {bottom: -300px; opacity: 0} 1}
+  @keyframes animatebottom  {
+    0% {bottom: -300px}
+    20% {bottom: 0}
+    50% {bottom: 0}
+    100% {bottom: -300px}
   }
 `