Lo que estoy tratando de hacer es; Abrir una información sobre herramientas al pasar el cursor sobre el icono. Me las arreglé para hacer esto, pero no quiero que el ícono desaparezca cuando el cursor pasa sobre el ícono.
const [hover, setHover] = useState(false); const onHover = () => { setHover(true); }; const onLeave = () => { setHover(false); }; <div onMouseEnter={onHover} onMouseLeave={onLeave}> {hover ? <InstallmentInformation installmentList={props.location.state.toBePaidList}/> : <AS.InfoIcon />} //AS.InfoIcon--> My icon </div>¿Qué puedo hacer para que el icono no desaparezca?
Simplemente mueva el ícono fuera del condicional
<div onMouseEnter={onHover} onMouseLeave={onLeave}> <AS.InfoIcon /> {hover && <InstallmentInformation installmentList={props.location.state.toBePaidList}/> } </div> Espero que el desplazamiento siempre sea un boolean , si no lo es, conviértalo en un boolean usando !!hover hover evitar un comportamiento inesperado.
No sé qué tipo de efecto/posicionamiento desea para su información sobre herramientas, pero dado que su ícono no debe desaparecer, no debe estar condicionado. Prueba a empezar con algo así:
<div onMouseEnter={onHover} onMouseLeave={onLeave}> {hover && <InstallmentInformation installmentList={props.location.state.toBePaidList}/>} <AS.InfoIcon />Además, el estilo de su información sobre herramientas debe contener una propiedad de posición establecida en 'absoluta' y luego colocarla donde desee.