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,
-}) => (
-
- }
- placement={placement}
- overlay={{content}}
- >
- {children}
-
-
-);
+class Tooltip extends Component {
+ constructor(props) {
+ super(props);
+ this.tooltipContainerRef = React.createRef();
+ }
+
+ render() {
+ const { placement, content, children } = this.props;
+ return (
+
+ this.tooltipContainerRef.current}
+ arrowContent={}
+ placement={placement}
+ overlay={{content}}
+ >
+ {children}
+
+
+ );
+ }
+}
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 228084a6..8102a282 100644
--- a/src/views/Wallet/views/AccountReceive/index.js
+++ b/src/views/Wallet/views/AccountReceive/index.js
@@ -112,8 +112,6 @@ const qrCodeStyle = {
margin: '20px auto',
};
-const TooltipContentWrapper = styled.div``;
-
const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
@@ -148,8 +146,8 @@ const AccountReceive = (props: Props) => {
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
+ content={(
+
{addressUnverified ? (
Unverified address.
@@ -161,7 +159,7 @@ const AccountReceive = (props: Props) => {
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
)}
-
+
)}
>