From 750251311c6c2b35983fd45793908b9a970446f3 Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Wed, 21 Dec 2016 18:33:10 -0300
Subject: [PATCH] Ivan - Improve tooltip styling and animation [skip ci]

---
 client/src/core-components/tooltip.js   | 4 ++--
 client/src/core-components/tooltip.scss | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/core-components/tooltip.js b/client/src/core-components/tooltip.js
index 04ea97e2..738b1051 100644
--- a/client/src/core-components/tooltip.js
+++ b/client/src/core-components/tooltip.js
@@ -28,7 +28,7 @@ class Tooltip extends React.Component {
 
     renderAnimatedMessage() {
         return (
-            <Motion defaultStyle={{opacity: 0}} style={{opacity: spring(1)}}>
+            <Motion defaultStyle={{opacity: 0, top: -30}} style={{opacity: spring(1), top: spring(0)}}>
                 {this.renderMessage.bind(this)}
             </Motion>
         )
@@ -36,7 +36,7 @@ class Tooltip extends React.Component {
 
     renderMessage(animation) {
         return (
-            <div style={animation}>
+            <div className="tooltip__animated-container" style={animation}>
                 <span className="tooltip__pointer-shadow"/>
                 <span className="tooltip__pointer"/>
                 <div className="tooltip__message">
diff --git a/client/src/core-components/tooltip.scss b/client/src/core-components/tooltip.scss
index 857a917d..b9b4390b 100644
--- a/client/src/core-components/tooltip.scss
+++ b/client/src/core-components/tooltip.scss
@@ -8,12 +8,15 @@
         cursor: default;
     }
 
+    &__animated-container {
+        position: relative;
+    }
+
     &__message {
         position: absolute;
         bottom: 100%;
-        left: -25%;
         margin-bottom: 15px;
-        margin-left: -10px;
+        margin-left: -15px;
         border: 0 solid rgba(0, 0, 0, 0.247059);
         box-shadow: rgba(0, 0, 0, 0.247059) 0 -1px 4px;
         border-radius: 4px;