Merged in new-component-tooltip (pull request #44)

New component tooltip

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

@@ -9,6 +9,7 @@ const Checkbox = require('core-components/checkbox');
 const Widget = require('core-components/widget');
 const DropDown = require('core-components/drop-down');
 const Menu = require('core-components/menu');
+const Tooltip = require('core-components/tooltip');
 
 let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
 let secondaryMenuItems = [
@@ -77,6 +78,12 @@ let DemoPage = React.createClass({
             render: (
                 <Menu items={secondaryMenuItems} type="secondary"/>
             )
+        },
+        {
+            title: 'Tooltip',
+            render: (
+                <Tooltip content="mensaje mensa jemensajemens ajem ensaje  nsaje adicionals">hola</Tooltip>
+            )
         }
 	],
 

client/src/core-components/tooltip.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import {Motion, spring} from 'react-motion';
+
+class Tooltip extends React.Component {
+    
+    static propTypes = {
+        children: React.PropTypes.node,
+        content: React.PropTypes.node
+    };
+
+    constructor (props){
+        super(props);
+        this.state = {show : false};
+    }
+
+    render (){
+        return (
+            <div className="tooltip" >
+                {(this.state.show) ? this.renderAnimatedMessage() : null}
+                <div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
+            </div>
+        );
+    }
+
+    renderAnimatedMessage(){
+        return (
+            <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>
+        )
+    }
+    onClick(){
+        if (this.state.show) {
+            this.setState({show : false});
+        } else {
+            this.setState({show : true});
+        }
+    }
+}
+
+export default Tooltip;

client/src/core-components/tooltip.scss

@@ -0,0 +1,30 @@
+.tooltip {
+    position: relative;
+    display: inline-block;
+    &__children{
+
+    }
+
+    &__message{
+        position: absolute;
+        bottom: 100%;
+        left: -25%;
+        margin-bottom: 10px;
+        box-shadow: 0 0 4px #8D8D8D;
+        border-radius: 4px;
+        max-width: 200px;
+        background-color: #F7F7F7;
+        color: black;
+        padding: 10px;
+    }
+    &__pointer{
+
+        border: solid transparent;
+        position: absolute;
+        border-top-color: #8D8D8D;
+        border-width: 10px;
+        top: -10px;
+        left: 50%;
+        margin-left: -8px;
+    }
+}