Merge pull request #997 from ethereum/tooltip

Tooltip

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

src/app/ui/tooltip.js

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