如何在面板上的固定位置添加工具提示

<div id="tooltip-container">
  <button id="target-element">按钮</button>
</div>

#tooltip-container {
  position: relative;
}

#target-element {
  position: fixed;
  top: 100px;
  left: 100px;
}

.tooltip {
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #f1f1f1;
  color: #333;
  padding: 5px;
  display: none;
}

const targetElement = document.getElementById('target-element');
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.textContent = '这是一个工具提示';

targetElement.addEventListener('mouseenter', function() {
  tooltip.style.display = 'block';
  document.body.appendChild(tooltip);
});

targetElement.addEventListener('mouseleave', function() {
  tooltip.style.display = 'none';
  document.body.removeChild(tooltip);
});