1.ToolTip

import {useState,useRef} from 'react';


const ToolTip  = (props) => {
    const TxtRef = useRef();
    const TimeoutRef = useRef()
    const style = {
        bottom:{
            position:'absolute',
            left:TxtRef.current && TxtRef.current.clientWidth,
            top:TxtRef.current 
 
&& TxtRef.current.clientHeight,
            padding:'3px 6px',
            backgroundColor:'rgba(238, 239, 239,.6)',
            boxShadow:'0 0 2px #ccc',
            whiteSpace:'nowrap',
            fontSize:12,
            color:'#333'
        }
    };
    const [bottom,setBottom] = useState(false
 
)
    return (
        <div style={{position:"relative",cursor:"pointer"}}
             onMouseEnter={()=>{
                 TimeoutRef.current = setTimeout(()=>{
                     setBottom(true)
                 },1000)
             }}
             onMouseLeave={()=>{
                 console.log(
 
'讓我康康',TxtRef.current.clientWidth);
                 setBottom(false)
                 clearTimeout(TimeoutRef.current)
             }}
        >
            <div

                style={bottom?{...style.bottom}:{display:'none'}}
            >
                {props.txt}
            </div>
            <div style={{...props.style}}
                 ref={TxtRef}
            >
                {props.txt}
            </div>
        </div>
    )
};

export default ToolTip