Added tooltip component

src/components/Tooltip/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import RcTooltip from 'rc-tooltip';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { FONT_SIZE } from 'config/variables';
+
+const TooltipContent = styled.div`
+    width: ${props => (props.isAside ? '260px' : '320px')};
+    font-size: ${FONT_SIZE.SMALLEST};
+`;
+
+const Tooltip = ({
+    content, placement = 'bottomRight', children,
+}) => (
+    <RcTooltip
+        arrowContent={<div className="rc-tooltip-arrow-inner" />}
+        placement={placement}
+        overlay={<TooltipContent>{content}</TooltipContent>}
+    >
+        {children}
+    </RcTooltip>
+);
+
+Tooltip.propTypes = {
+    placement: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string,
+    ]),
+    content: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string,
+    ]),
+};
+
+export default Tooltip;

src/components/TooltipContent/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { FONT_SIZE } from 'config/variables';
-
-const Wrapper = styled.div`
-    width: ${props => (props.isAside ? '260px' : '320px')};
-    font-size: ${FONT_SIZE.SMALLEST};
-`;
-
-const TooltipContent = ({
-    children, isAside = false,
-}) => (
-    <Wrapper
-        isAside={isAside}
-    >
-        {children}
-    </Wrapper>
-);
-
-TooltipContent.propTypes = {
-    children: PropTypes.node,
-    isAside: PropTypes.bool,
-};
-
-export default TooltipContent;