jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import { filterProps } from '../util' ; interface ToolTipProps < T = HTMLDivElement > extends React . HTMLProps < T > { bottom ? : boolean ; disabled ? : boolean ; left ? : boolean ; light ? : boolean ; right ? : boolean ; text ? : string ; } const tooltipStyle = ( { disabled = false , bottom = false , left = false , right = false , light = false , } ) => ( { '&::after' : { backgroundColor : light ? COLOR . WHITE : COLOR . TEXT , borderRadius : '4px' , bottom : bottom || left || right ? 'auto' : 'calc(100% + 8px)' , boxShadow : '0 2px 16px 0 rgba(0, 0, 0, 0.12)' , color : light ? COLOR . TEXT : COLOR . WHITE , content : 'attr(data-text)' , display : 'block' , fontSize : '12px' , fontWeight : light ? 400 : 600 , left : right ? 'calc(100% + 8px)' : 'auto' , lineHeight : '14px' , maxWidth : '200px' , minWidth : '120px' , opacity : 0 , padding : '12px' , pointerEvents : 'none' , position : 'absolute' , right : left ? 'calc(100% + 8px)' : 'auto' , textAlign : 'center' , top : bottom ? 'calc(100% + 8px)' : 'auto' , transform : left || right ? `translateX(${ left ? - 16 : 16 }px)` : `translateY(${ bottom ? - 16 : 16 }px)` , transition : 'all 0.15s ease-in-out' , } , '&:hover::after' : disabled || { opacity : 1 , transform : 'translateY(0) translateX(0)' , transition : 'all 0.25s ease-in-out' , } , alignItems : 'center' , display : 'flex' , flexDirection : 'column' , justifyContent : 'center' , position : 'relative' , } ) ; const filterTooltipProps = ( props ) => filterProps ( props , [ 'bottom' , 'disabled' , 'left' , 'light' , 'right' ] ) ; export const Tooltip = ( { text = '' , ... props } ) => ( < div css = { tooltipStyle ( props ) } data - text = { text } { ... filterTooltipProps ( props ) } />);