How to call ReactTooltip.hide() on Hover in react-tooltip?

1.2k Views Asked by At

I am using react-tooltip to show Tooltip on Table, I want the tooltip only for the text that has Ellipsis.

This is what I have done

    const labelRef = useRef(null);
    const classes = useStyles();
    let tooltipText = tooltipContent || cellContent;

    const showTooltip = () => {
        if(labelRef?.current?.offsetWidth < labelRef?.current?.scrollWidth) {
            return true;
        }
        return false
    };
    
    return <Box ref={labelRef} onMouseOver={() => { ReactTooltip.hide(showTooltip) }} className={classes.addEllipsis} data-tip={tooltipText}>{cellContent}</Box>

ReactTooltip.hide(showTooltip) is not working, I even passed true to check whether it is working or not but it does not work ReactTooltip.hide(true)

In the official documentation they are calling it on click, I need to call it on hover of this Div

0

There are 0 best solutions below