1- Hay una información sobre herramientas que se abre al pasar el cursor sobre el icono. Pero cuando la pantalla comienza a encogerse un poco, el div comienza a cambiar de posición. ¿Cómo puedo prevenir esto?

EDITAR: fue suficiente para dar las propiedades a la clase .installmentinfo__container margin: auto; y transformar: traducirX(-250px);

2- Tengo otra pregunta. Como puede ver en la imagen a continuación, la información sobre herramientas que se abre no se abre exactamente debajo del icono. No quiero un espacio entre la información sobre herramientas desplegable y el ícono.

Nota: La información sobre herramientas que se abre debe aparecer en la parte inferior izquierda del icono.

EDITAR: solucioné el problema 2.

La imagen de la que estoy hablando;

html

 <div className="installmentinfo__container"> { props.installmentList?.map((e, i) => { return ( <div className="installmentinfo"> <div className="column"> <div className="installmentnumber" >{(i + 1).toString()}</div> <div className="installmentdate">{e.date}</div> <div className="installmentamount">{e.amount} {e.currency}</div> </div> </div> ); }) } </div>

CSS

 .installmentinfo__container { border: 1px solid #d1d1d1; border-radius: 10px; max-width: 300px; box-shadow: 2px 2px 4px 4px #d1d1d1; position: absolute; right: 340px; background-color: white; &:last-of-type { border-bottom: none; } .installmentinfo { width: 280px; height: auto; padding: 0em 1em; .column { display: flex; margin: 5px; justify-content: space-between; font-size: 1.3rem; border-bottom: 1.5px solid #d1d1d1; } .installmentnumber { float: left; } .installmentdate { width: 50%; color: black !important; } .installmentamount { width: 50%; color: black !important; font-weight: 1000; } } }