Fix tooltip in AccountSummary

src/components/Tooltip/index.js

@@ -173,9 +173,17 @@ const Wrapper = styled.div`
 
 class Tooltip extends Component {
     render() {
-        const { placement, content, children } = this.props;
+        const {
+            className,
+            placement,
+            content,
+            children,
+        } = this.props;
         return (
-            <Wrapper innerRef={(node) => { this.tooltipContainerRef = node; }}>
+            <Wrapper
+                className={className}
+                innerRef={(node) => { this.tooltipContainerRef = node; }}
+            >
                 <RcTooltip
                     getTooltipContainer={() => this.tooltipContainerRef}
                     arrowContent={<div className="rc-tooltip-arrow-inner" />}
@@ -190,6 +198,7 @@ class Tooltip extends Component {
 }
 
 Tooltip.propTypes = {
+    className: PropTypes.string,
     placement: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.element,

src/views/Wallet/views/AccountSummary/index.js

@@ -7,7 +7,7 @@ import Icon from 'components/Icon';
 import { AsyncSelect } from 'components/Select';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
-import Tooltip from 'rc-tooltip';
+import Tooltip from 'components/Tooltip';
 
 import CoinLogo from 'components/images/CoinLogo';
 import * as stateUtils from 'reducers/utils';
@@ -25,10 +25,17 @@ const AccountHeading = styled.div`
     align-items: center;
 `;
 
-const StyledH2 = styled(H2)`
+const H2Wrapper = styled.div`
+    display: flex;
+    align-items: center;
     padding: 20px 48px;
 `;
 
+const StyledTooltip = styled(Tooltip)`
+    position: relative;
+    top: 2px;
+`;
+
 const AccountName = styled.div`
     display: flex;
     align-items: center;
@@ -93,24 +100,23 @@ const AccountSummary = (props: Props) => {
                 localStorage={props.localStorage}
             />
 
-            <StyledH2>
-                Tokens
-                <Tooltip
-                    arrowContent={<div className="rc-tooltip-arrow-inner" />}
-                    overlay={(
+            <H2Wrapper>
+                <H2>Tokens</H2>
+                <StyledTooltip
+                    placement="top"
+                    content={(
                         <React.Fragment>
                             Insert token name, symbol or address to be able to send it.
                         </React.Fragment>
                     )}
-                    placement="top"
                 >
                     <StyledIcon
                         icon={ICONS.HELP}
                         color={colors.TEXT_SECONDARY}
                         size={24}
                     />
-                </Tooltip>
-            </StyledH2>
+                </StyledTooltip>
+            </H2Wrapper>
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}