Added custom container for tooltip

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",

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 = ({
+class Tooltip extends Component {
-    content, placement = 'bottomRight', children, className,
+    constructor(props) {
-}) => (
+        super(props);
-    <Wrapper>
+        this.tooltipContainerRef = React.createRef();
-        <RcTooltip
+    }
-            className={className}
+
-            arrowContent={<div className="rc-tooltip-arrow-inner" />}
+    render() {
-            placement={placement}
+        const { placement, content, children } = this.props;
-            overlay={<TooltipContent>{content}</TooltipContent>}
+        return (
-        >
+            <Wrapper innerRef={this.tooltipContainerRef}>
-            {children}
+                <RcTooltip
-        </RcTooltip>
+                    getTooltipContainer={() => this.tooltipContainerRef.current}
-    </Wrapper>
+                    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,

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={(
+                            content={(
-                                <TooltipContentWrapper>
+                                <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

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"