当鼠标悬停在文本上时，如何在文本旁边显示图像？图像的位置必须根据文本的长度而改变

<div id="image-container"></div>
<p data-image="image1.jpg">文本内容</p>

#image-container {
  position: absolute;
  top: 0;
  left: 0;
}

p {
  position: relative;
  display: inline;
  cursor: pointer;
}

const textElement = document.querySelector('p');
const imageContainer = document.getElementById('image-container');

textElement.addEventListener('mouseover', function() {
  const text = this.textContent;
  const image = this.getAttribute('data-image');
  const textWidth = this.offsetWidth;
  const textHeight = this.offsetHeight;
  const containerWidth = imageContainer.offsetWidth;
  
  // 计算图像容器的位置
  const left = textWidth + 10; // 图像距离文本右侧的距离
  const top = (textHeight - containerWidth) / 2; // 图像垂直居中
  
  // 设置图像容器的位置和背景图像
  imageContainer.style.left = left + 'px';
  imageContainer.style.top = top + 'px';
  imageContainer.style.backgroundImage = `url(${image})`;
});

textElement.addEventListener('mouseout', function() {
  // 鼠标移出文本时隐藏图像
  imageContainer.style.backgroundImage = 'none';
});