From 1ff9060ff07fdf8ba11bf6dc0d585c5cdb48d1ea Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 5 Sep 2018 12:20:07 +0200
Subject: [PATCH] Added custom container for tooltip

---
 package.json                                  |  2 +-
 src/components/Tooltip/index.js               | 40 +++++++++++--------
 .../Wallet/views/AccountReceive/index.js      | 10 ++---
 yarn.lock                                     | 11 ++++-
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 7091e217..15bd6f38 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
         "rc-tooltip": "^3.7.0",
-        "react": "^16.2.0",
+        "react": "^16.4.2",
         "react-css-transition": "^0.7.4",
         "react-dom": "^16.2.0",
         "react-hot-loader": "^4.3.4",
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 6a61543d..7ed572db 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import RcTooltip from 'rc-tooltip';
 import colors from 'config/colors';
 import styled from 'styled-components';
@@ -15,6 +15,7 @@ const Wrapper = styled.div`
         position: absolute;
         z-index: 1070;
         display: block;
+        background: red;
         visibility: visible;
         border: 1px solid ${colors.DIVIDER};
         border-radius: 3px;
@@ -170,24 +171,31 @@ const Wrapper = styled.div`
     }
 `;
 
-const Tooltip = ({
-    content, placement = 'bottomRight', children, className,
-}) => (
-    <Wrapper>
-        <RcTooltip
-            className={className}
-            arrowContent={<div className="rc-tooltip-arrow-inner" />}
-            placement={placement}
-            overlay={<TooltipContent>{content}</TooltipContent>}
-        >
-            {children}
-        </RcTooltip>
-    </Wrapper>
-);
+class Tooltip extends Component {
+    constructor(props) {
+        super(props);
+        this.tooltipContainerRef = React.createRef();
+    }
+
+    render() {
+        const { placement, content, children } = this.props;
+        return (
+            <Wrapper innerRef={this.tooltipContainerRef}>
+                <RcTooltip
+                    getTooltipContainer={() => this.tooltipContainerRef.current}
+                    arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                    placement={placement}
+                    overlay={<TooltipContent>{content}</TooltipContent>}
+                >
+                    {children}
+                </RcTooltip>
+            </Wrapper>
+        );
+    }
+}
 
 Tooltip.propTypes = {
     placement: PropTypes.string,
-    className: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.element,
         PropTypes.string,
diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js
index ec92414d..a5ae2cbf 100644
--- a/src/views/Wallet/views/AccountReceive/index.js
+++ b/src/views/Wallet/views/AccountReceive/index.js
@@ -7,7 +7,7 @@ import Icon from 'components/Icon';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
 
-import Tooltip from 'rc-tooltip';
+import Tooltip from 'components/Tooltip';
 import { QRCode } from 'react-qr-svg';
 
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
@@ -112,8 +112,6 @@ const qrCodeStyle = {
     margin: '20px auto',
 };
 
-const TooltipContentWrapper = styled.div``;
-
 const AccountReceive = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const {
@@ -149,8 +147,8 @@ const AccountReceive = (props: Props) => {
                         <Tooltip
                             arrowContent={<div className="rc-tooltip-arrow-inner" />}
                             placement="bottomRight"
-                            overlay={(
-                                <TooltipContentWrapper>
+                            content={(
+                                <React.Fragment>
                                     {addressUnverified ? (
                                         <React.Fragment>
                                             Unverified address.
@@ -162,7 +160,7 @@ const AccountReceive = (props: Props) => {
                                             {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
                                         </React.Fragment>
                                     )}
-                                </TooltipContentWrapper>
+                                </React.Fragment>
                             )}
                         >
                             <EyeButton
diff --git a/yarn.lock b/yarn.lock
index 61c6000a..c23803a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8055,7 +8055,7 @@ react-transition-group@^2.2.1:
     prop-types "^15.5.8"
     warning "^3.0.0"
 
-"react@^15.4.2 || ^16.0.0", react@^16.2.0:
+"react@^15.4.2 || ^16.0.0":
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
@@ -8064,6 +8064,15 @@ react-transition-group@^2.2.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react@^16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 read-chunk@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"