diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 3872a698..8f94ad15 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -3,15 +3,10 @@ import RcTooltip from 'rc-tooltip'; import colors from 'config/colors'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { FONT_SIZE } from 'config/variables'; - -const TooltipContent = styled.div` - width: ${props => (props.isAside ? '260px' : '320px')}; - font-size: ${FONT_SIZE.SMALLEST}; -`; const Wrapper = styled.div` .rc-tooltip { + max-width: ${props => `${props.maxWidth}px` || 'auto'}; position: absolute; z-index: 1070; display: block; @@ -177,9 +172,11 @@ class Tooltip extends Component { placement, content, children, + maxWidth, } = this.props; return ( { this.tooltipContainerRef = node; }} > @@ -187,7 +184,7 @@ class Tooltip extends Component { getTooltipContainer={() => this.tooltipContainerRef} arrowContent={
} placement={placement} - overlay={{content}} + overlay={content} > {children} @@ -203,6 +200,7 @@ Tooltip.propTypes = { PropTypes.element, PropTypes.string, ]), + maxWidth: PropTypes.number, content: PropTypes.oneOfType([ PropTypes.element, PropTypes.string, diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index f61dd37a..83dcbb4f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -27,6 +27,10 @@ const Text = styled.span` color: ${colors.TEXT_SECONDARY}; `; +const TooltipContent = styled.div` + font-size: ${FONT_SIZE.SMALLEST}; +`; + const RowAccountWrapper = styled.div` width: 100%; display: flex; @@ -183,7 +187,8 @@ const AccountMenu = (props: Props): ?React$Element => { } else { discoveryStatus = ( To add a new account, last account must have some transactions.} + maxWidth={300} + content={To add a new account, last account must have some transactions.} placement="bottom" >