1- There is a tooltip that opens when hovering the cursor over the icon. But when the screen starts to shrink a little, the div starts to change position. How can I prevent this?

EDIT: It was enough to give the properties to the .installmentinfo__container class margin: auto; and transform: translateX(-250px);

2- I have another question. As you can see in the image below, the tooltip that opens does not open exactly under the icon. I don't want a space between the dropdown tooltip and the icon.

Note: The tooltip that opens should appear at the bottom left of the icon.

EDIT: I fixed problem 2.

The picture I'm talking about;

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;
    }
  }
}