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