diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index c780c3ad..6a61543d 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -10,7 +10,7 @@ const TooltipContent = styled.div` font-size: ${FONT_SIZE.SMALLEST}; `; -const StyledRcTooltip = styled(RcTooltip)` +const Wrapper = styled.div` .rc-tooltip { position: absolute; z-index: 1070; @@ -37,6 +37,7 @@ const StyledRcTooltip = styled(RcTooltip)` min-height: 34px; border: 1px solid ${colors.WHITE}; } + .rc-tooltip-arrow, .rc-tooltip-arrow-inner { position: absolute; @@ -54,6 +55,7 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 6px 0; border-top-color: ${colors.DIVIDER}; } + .rc-tooltip-placement-top .rc-tooltip-arrow-inner, .rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, .rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { @@ -62,15 +64,19 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 6px 0; border-top-color: ${colors.WHITE}; } + .rc-tooltip-placement-top .rc-tooltip-arrow { left: 50%; } + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { left: 15%; } + .rc-tooltip-placement-topRight .rc-tooltip-arrow { right: 15%; } + .rc-tooltip-placement-right .rc-tooltip-arrow, .rc-tooltip-placement-rightTop .rc-tooltip-arrow, .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { @@ -79,6 +85,7 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 6px 6px 0; border-right-color: ${colors.DIVIDER}; } + .rc-tooltip-placement-right .rc-tooltip-arrow-inner, .rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, .rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { @@ -87,16 +94,20 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 6px 6px 0; border-right-color: ${colors.WHITE}; } + .rc-tooltip-placement-right .rc-tooltip-arrow { top: 50%; } + .rc-tooltip-placement-rightTop .rc-tooltip-arrow { top: 15%; margin-top: 0; } + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { bottom: 15%; } + .rc-tooltip-placement-left .rc-tooltip-arrow, .rc-tooltip-placement-leftTop .rc-tooltip-arrow, .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { @@ -105,6 +116,7 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 0 6px 6px; border-left-color: ${colors.DIVIDER}; } + .rc-tooltip-placement-left .rc-tooltip-arrow-inner, .rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, .rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { @@ -113,16 +125,20 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 6px 0 6px 6px; border-left-color: ${colors.WHITE}; } + .rc-tooltip-placement-left .rc-tooltip-arrow { top: 50%; } + .rc-tooltip-placement-leftTop .rc-tooltip-arrow { top: 15%; margin-top: 0; } + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { bottom: 15%; } + .rc-tooltip-placement-bottom .rc-tooltip-arrow, .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { @@ -131,6 +147,7 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 0 6px 6px; border-bottom-color: ${colors.DIVIDER}; } + .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, .rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { @@ -139,12 +156,15 @@ const StyledRcTooltip = styled(RcTooltip)` border-width: 0 6px 6px; border-bottom-color: ${colors.WHITE}; } + .rc-tooltip-placement-bottom .rc-tooltip-arrow { left: 50%; } + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { left: 15%; } + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { right: 15%; } @@ -153,14 +173,16 @@ const StyledRcTooltip = styled(RcTooltip)` const Tooltip = ({ content, placement = 'bottomRight', children, className, }) => ( - } - placement={placement} - overlay={{content}} - > - {children} - + + } + placement={placement} + overlay={{content}} + > + {children} + + ); Tooltip.propTypes = {