Guillermo - add tooltip [skip ci]

client/src/app/demo/components-demo-page.js

@@ -82,7 +82,7 @@ let DemoPage = React.createClass({
         {
             title: 'Tooltip',
             render: (
-                <Tooltip content="mensaje adicionalsssssssssssssssss ssssss ssssssssssssssssssss">hola</Tooltip>
+                <Tooltip content="mensaje mensa jemensajemens ajem ensaje  nsaje adicionals">hola</Tooltip>
             )
         }
 	],

client/src/core-components/tooltip.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {Motion, spring} from 'react-motion';
 
 class Tooltip extends React.Component {
     
@@ -13,15 +14,25 @@ class Tooltip extends React.Component {
     render (){
         return (
             <div className="tooltip" >
-                {(this.state.show) ? this.renderMessage() : null}
+                {(this.state.show) ? this.renderAnimatedMessage() : null}
                 <div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
             </div>
         );
     }
-    renderMessage(){
+    renderAnimatedMessage(){
         return (
-            <div className="tooltip__message">
-                {this.props.content}
+            <Motion defaultStyle={{opacity:spring(0)}} style={{opacity:spring(1)}}>
+                {this.renderMessage.bind(this)}
+            </Motion>
+        )
+    }
+    renderMessage(animation){
+        return (
+            <div style={animation}>
+                <div className="tooltip__message">
+                    {this.props.content}
+                </div>
+                <span className="tooltip__pointer"/>
             </div>
         )
     }

client/src/core-components/tooltip.scss

@@ -1,5 +1,6 @@
 .tooltip {
     position: relative;
+    display: inline-block;
     &__children{
 
     }
@@ -16,4 +17,14 @@
         color: black;
         padding: 10px;
     }
+    &__pointer{
+
+        border: solid transparent;
+        position: absolute;
+        border-top-color: #8D8D8D;
+        border-width: 10px;
+        top: -10px;
+        left: 50%;
+        margin-left: -8px;
+    }
 }