如何根据没有宽度的内容大小显示div

Question

我正在地图上显示一些标记。当用户在地图上盘旋时，我正在显示工具提示。但是当我将鼠标悬停在标记上时，我将获得工具提示，如下所示

我试图为父div添加一些css，如位置为相对和宽度为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;
}