Added tooltip component

Author: prasanna1211

docs/client/components/common/DefaultCode/Tooltip/index.js

@@ -0,0 +1,23 @@
+
+export const defaultCode =   `
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        {/* Preview Block 1 */}
+        <PreviewBlock header="Default Tooltip">
+          <Tooltip tooltipText='Normal Tooltip'>Look down</Tooltip>
+        </PreviewBlock>
+        {/* Preview Block 2 */}
+        <PreviewBlock header="Tooltip at top">
+          <Tooltip tooltipText='Top Tooltip' top>Look up</Tooltip>
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/index.js

@@ -7,3 +7,4 @@ export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
 export { defaultCode as TextInputDefaultCode } from './TextInput';
 export { defaultCode as SnackbarDefaultCode } from './Snackbar';
 export { defaultCode as AvatarDefaultCode } from './Avatar';
+export { defaultCode as TooltipDefaultCode } from './Tooltip';

docs/client/components/common/componentList.js

@@ -15,6 +15,7 @@ import Snackbar from '../../../../src/snackbar';
 import SnackbarReadme from '../../../../src/snackbar/readMe.md';
 import Avatar from '../../../../src/avatar';
 import AvatarReadme from '../../../../src/avatar/readMe.md';
+import Tooltip from '../../../../src/avatar';
 
 import {
   CardDefaultCode,
@@ -26,6 +27,7 @@ import {
   TextInputDefaultCode,
   SnackbarDefaultCode,
   AvatarDefaultCode,
+  TooltipDefaultCode,
 } from './DefaultCode';
 
 export const componentList = [
@@ -82,5 +84,11 @@ export const componentList = [
     docs: AvatarReadme,
     component: Avatar,
     defaultCode: AvatarDefaultCode,
+  },
+  {
+    name: 'Tooltip',
+    docs: AvatarReadme,
+    component: Tooltip,
+    defaultCode: TooltipDefaultCode,
   }
 ];

src/index.js

@@ -9,6 +9,7 @@ import RadioButtonGroup from './radioButtonGroup';
 import TextInput from './textInput';
 import Snackbar from './snackbar';
 import Avatar from './avatar';
+import Tooltip from './tooltip';
 
 export default {
   Button,
@@ -20,6 +21,7 @@ export default {
   TextInput,
   Snackbar,
   Avatar,
+  Tooltip,
 };
 
-// ReactDOM.render(<Avatar image="Https://placeimg.com/80/80/animals"/>, document.getElementById('index'));
+// ReactDOM.render(<Tooltip tooltipText='Tooltip' top>Here it is</Tooltip>, document.getElementById('index'));

src/tooltip/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import defaultTheme from './theme.scss';
+
+class Tooltip extends React.Component {
+  state = { tooltipActive: false };
+
+  enableTooltip = () => {
+    this.setState({
+      tooltipActive: true,
+    });
+  }
+
+  disableTooltip = () => {
+    this.setState({
+      tooltipActive: false,
+    });
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      theme,
+      tooltipText,
+      top,
+      ...other
+    } = this.props;
+    const classes = classnames(theme.tooltip, className, theme.baseContent);
+    return (
+      <div className={classes} {...other} onMouseEnter={this.enableTooltip} onMouseLeave={this.disableTooltip}>
+        <div className={theme.contentWrapper}>
+          {children}
+        </div>
+        {
+          this.state.tooltipActive && (
+            <div className={theme.tip}>
+              <div className={classnames(theme.tooltipContent, { top })}>
+                {tooltipText}
+              </div>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  theme: PropTypes.object,
+  image: PropTypes.string,
+  alt: PropTypes.string,
+  title: PropTypes.string,
+  tooltipText: PropTypes.string.isRequired,
+  top: PropTypes.bool,
+
+};
+
+Tooltip.defaultProps = {
+  children: null,
+  className: '',
+  theme: defaultTheme,
+  image: null,
+  alt: '',
+  title: '',
+  top: undefined,
+};
+
+export default themr('CBTooltip', defaultTheme)(Tooltip);

src/tooltip/theme.scss

@@ -0,0 +1,23 @@
+@import '../globals/theme';
+
+:local(.baseContent) {
+  cursor: pointer;
+}
+
+:local(.tip) {
+  position: relative;
+  cursor: pointer;
+  
+}
+
+:local(.tooltipContent) {
+  background: $secondary-grey;
+  font-size: 14px;
+  position: absolute;
+  top: 20px;
+  padding: 3px 5px;
+  color: $original-white;
+  &.top {
+    top: -60px;
+  }
+}