diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 1c25903e..8c214510 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -9,10 +9,11 @@ const Wrapper = styled.div``;
const Content = styled.div`
max-width: ${props => `${props.maxWidth}px` || 'auto'};
- text-align: justify;
`;
-const ContentWrapper = styled.div``;
+const ContentWrapper = styled.div`
+ display: block;
+`;
const ReadMore = styled.div`
margin-top: 15px;
diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js
index 4bd3771c..10a7761b 100644
--- a/src/support/styles/Tooltip.js
+++ b/src/support/styles/Tooltip.js
@@ -3,7 +3,6 @@ import colors from 'config/colors';
const tooltipStyles = css`
.rc-tooltip {
- min-width: 200px;
position: absolute;
z-index: 1070;
visibility: visible;
diff --git a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js
new file mode 100644
index 00000000..985eb2d5
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div``;
+const Content = styled.div``;
+
+const VerifyAddressTooltip = ({ isConnected, isAvailable, addressUnverified }) => (
+
+ {addressUnverified && (
+
+ Unverified address. {isConnected && isAvailable ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
+
+ )}
+ {!addressUnverified && (
+
+ {isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
+
+ )}
+
+);
+
+VerifyAddressTooltip.propTypes = {
+ isConnected: PropTypes.bool.isRequired,
+ isAvailable: PropTypes.bool.isRequired,
+ addressUnverified: PropTypes.bool.isRequired,
+};
+
+
+export default VerifyAddressTooltip;
diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index 8f8e1e40..9bef69f1 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -12,6 +12,7 @@ import Tooltip from 'components/Tooltip';
import { QRCode } from 'react-qr-svg';
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
+import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container';
@@ -173,20 +174,13 @@ const AccountReceive = (props: Props) => {
onClick={() => props.showAddress(account.addressPath)}
>
- {addressUnverified ? (
-
- Unverified address.
- {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
-
- ) : (
-
- {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
-
- )}
-
+
)}
>