Как показать div на основе размера контента без ширины

Question

Я показываю некоторые маркеры на карте. Когда пользователь наводит курсор на карту, я отображаю всплывающую подсказку. Но когда я нахожу курсор над маркером, я получаю всплывающую подсказку, как показано ниже

Я попытался добавить немного css для родительского элемента div, как относительную позицию и ширину как 500px, но когда я использую стиль, маркер перемещается из текущего местоположения. Ожидаемый результат, как показано ниже, может кто-нибудь сказать, что я делаю неправильно.

Маркер

<div style={{width: '500px', position:'relative'}}>
      <Tippy
        content={
          <div>
            <h5>{clusterId}</h5>
            <p>Total Devices: {totalNodes}</p>
            <hr style={{ borderColor: 'white' }} />
            <ol style={{ textAlign: 'left', paddingLeft: '10pt' }}>
              <li>Good: {good}</li>
              <li>Need Attention: {attention}</li>
              <li>Monitor Closely: {monitor}</li>
            </ol>
          </div>
        }
        appendTo='parent'
        arrow={true}
        animation="fade"
        theme="bootstrap"
        duration={0}
        hideOnClick={false}
      >
        <div
          className="pin bounce"
          style={{ backgroundColor: color, cursor: 'pointer' }}
          onClick={handleClick}
        />
      </Tippy>
      <div className="pulse" />
    </div>

CSS:

   .pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}