Estoy tratando de desarrollar un componente Tooltip. Para hacerlo, tengo que acceder a los elementos secundarios (objeto que activa la información sobre herramientas) para obtener los detectores de eventos.

Estoy usando React.cloneElement para lograr esto, pero el problema es que esto solo funciona cuando el elemento secundario es un elemento DOM, pero no funciona con componentes funcionales.

 export const Tooltip = ({text, placement = 'top', space = 15, children, disabled = 0, delay = 0, ...props}) => { const [show, setShow] = useState(0); const handleMouseOver = () => { setShow(1); // shows the tooltip console.log('Mouse over'); }; const handleMouseOut = () => { setShow(0); // hides the tooltip console.log('Mouse out'); }; return ( <> { React.cloneElement(children, { ...children.props, onMouseOver: handleMouseOver, //the events only fires if it is a DOM element onMouseLeave: handleMouseOut, })} { disabled || <StyledTooltip delay={delay} ref={tooltipRef} posRef={posRef} show={show}>{text} </StyledTooltip> } </> ) }

¿Cómo podría funcionar si el niño es un elemento DOM o un componente funcional?

¡Gracias por adelantado!