diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index e5fb3b7d..4b264990 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/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 adicionalsssssssssssssssss ssssss ssssssssssssssssssss">hola</Tooltip>
+            )
         }
 	],
 
diff --git a/client/src/core-components/tooltip.js b/client/src/core-components/tooltip.js
new file mode 100644
index 00000000..bec7c2f8
--- /dev/null
+++ b/client/src/core-components/tooltip.js
@@ -0,0 +1,40 @@
+import React from 'react'
+
+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.renderMessage() : null}
+                <div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
+            </div>
+        );
+    }
+    renderMessage(){
+        return (
+            <div className="tooltip__message">
+                {this.props.content}
+            </div>
+        )
+    }
+    onClick(){
+        if(this.state.show){
+            this.setState({show : false});
+        }else{
+            this.setState({show : true});
+        }
+
+
+    }
+}
+
+
+export default Tooltip;
\ No newline at end of file
diff --git a/client/src/core-components/tooltip.scss b/client/src/core-components/tooltip.scss
new file mode 100644
index 00000000..8cc25a0f
--- /dev/null
+++ b/client/src/core-components/tooltip.scss
@@ -0,0 +1,19 @@
+.tooltip {
+    position: relative;
+    &__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;
+    }
+}
\ No newline at end of file