Estoy escribiendo una aplicación de arranque de reacción donde aparece un botón al final de una animación. Cuando aparece el botón por primera vez, quiero que aparezca una información sobre herramientas junto a él. Una vez que el usuario pasa el cursor por encima y fuera del botón, la información sobre herramientas debería desaparecer y volver a aparecer cada vez que el usuario pasa el cursor por encima del botón nuevamente. Logré que esto funcione como deseo, pero cuando coloco el botón donde quiero que esté (fijo en la parte inferior de la pantalla), la información sobre herramientas aparece inicialmente en la posición incorrecta (donde estaba el botón antes de ser colocado).

He creado dos ejemplos simples para demostrar este comportamiento.

En el primer ejemplo, el botón se coloca en la parte superior de la pantalla y la información sobre herramientas se comporta como este deseo:

 function Testing(){ const refLink = useRef(null); const [overlayOpen, setOverlayOpen] = useState(true); // Initially open const [textDone, setTextDone] = useState(false); useEffect(() => { const timeoutId = setTimeout(() => { setTextDone(true) },1000) return () => clearTimeout(timeoutId) },[]) return( <Container> <Row> {textDone ? <> <Button ref={refLink} onMouseOver={() => setOverlayOpen(true)} onMouseOut={() => setOverlayOpen(false)} > <FaComment/> </Button> <Overlay target={refLink.current} show={overlayOpen} onHide={() => setOverlayOpen(false)} rootClose placement={"bottom"}> <Tooltip> Submit a personal response! </Tooltip> </Overlay> </> : '' } </Row> </Container> ) } export default Testing

El estado textDone se establece en verdadero una vez que finaliza la "animación". Para simplificar el ejemplo, omití la animación y recreé el retraso con setTimeout .

El segundo ejemplo es idéntico, excepto por la siguiente clase .css agregada al elemento Fila en el que se anidan el botón, la superposición y la información sobre herramientas.

 .fixed-button{ position:fixed; right: 20px; bottom: 20px; }

Con esta adición, el botón termina donde lo quiero, pero la información sobre herramientas aparece primero en la parte superior de la pantalla. Una vez que paso el mouse sobre el botón, la información sobre herramientas se mueve a la posición correcta.

Aquí hay algunos gifs de los dos ejemplos.

Ejemplo 1 (la información sobre herramientas se comporta según lo previsto, pero el botón no está colocado en el lugar correcto)

Ejemplo 2 (botón colocado donde lo quiero pero la información sobre herramientas aparece inicialmente en el lugar equivocado)

Mi pregunta es: ¿cómo puedo hacer que la información sobre herramientas aparezca inicialmente en la posición correcta?