From 321b95c1ffa78d4023e95f216513f1287a03c964 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 5 Sep 2018 11:47:07 +0200
Subject: [PATCH] Added tooltip component

---
 src/components/Tooltip/index.js        | 36 ++++++++++++++++++++++++++
 src/components/TooltipContent/index.js | 26 -------------------
 2 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Tooltip/index.js
 delete mode 100644 src/components/TooltipContent/index.js

diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
new file mode 100644
index 00000000..e7aaf016
--- /dev/null
+++ b/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;
diff --git a/src/components/TooltipContent/index.js b/src/components/TooltipContent/index.js
deleted file mode 100644
index fe07399a..00000000
--- a/src/components/TooltipContent/index.js
+++ /dev/null
@@ -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;