Tooltip refactored to sepearated component

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;

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;

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 }) => (
+    <Wrapper>
+        {addressUnverified && (
+            <Content>
+                Unverified address. {isConnected && isAvailable ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
+            </Content>
+        )}
+        {!addressUnverified && (
+            <Content>
+                {isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
+            </Content>
+        )}
+    </Wrapper>
+);
+
+VerifyAddressTooltip.propTypes = {
+    isConnected: PropTypes.bool.isRequired,
+    isAvailable: PropTypes.bool.isRequired,
+    addressUnverified: PropTypes.bool.isRequired,
+};
+
+
+export default VerifyAddressTooltip;

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)}
                         >
                             <Tooltip
-                                placement="bottom"
+                                placement="bottomRight"
                                 content={(
-                                    <React.Fragment>
+                                    <VerifyAddressTooltip
-                                        {addressUnverified ? (
+                                        isConnected={device.connected}
-                                            <React.Fragment>
+                                        isAvailable={device.available}
-                                        Unverified address.
+                                        addressUnverified={addressUnverified}
-                                                {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
+                                    />
-                                            </React.Fragment>
-                                        ) : (
-                                            <React.Fragment>
-                                                {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
-                                            </React.Fragment>
-                                        )}
-                                    </React.Fragment>
                                 )}
                             >
                                 <Icon