e.pageX和pageY使工具提示出现在奇怪的位置。

要解决“e.pageX和pageY使工具提示出现在奇怪位置”的问题，可以通过调整工具提示的定位方式来解决。下面是一个可能的解决方法，使用CSS的位置属性来控制工具提示的位置：

HTML:

<div class="container">
  <button class="tooltip-trigger" data-tooltip="This is a tooltip">Hover me</button>
  <div class="tooltip"></div>
</div>

CSS:

.container {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: #ccc;
  padding: 5px;
  border-radius: 5px;
}

.tooltip.active {
  display: block;
}

JavaScript:

const tooltipTrigger = document.querySelector('.tooltip-trigger');
const tooltip = document.querySelector('.tooltip');

tooltipTrigger.addEventListener('mouseover', function(e) {
  const tooltipText = this.getAttribute('data-tooltip');
  tooltip.textContent = tooltipText;
  
  tooltip.style.top = e.pageY + 'px';
  tooltip.style.left = e.pageX + 'px';
  tooltip.classList.add('active');
});

tooltipTrigger.addEventListener('mouseout', function() {
  tooltip.classList.remove('active');
});

这段代码首先为工具提示添加了一个包含数据属性的按钮。然后使用CSS设置了工具提示的样式，包括绝对定位和初始隐藏。JavaScript部分监听按钮的鼠标悬停事件，并根据鼠标位置设置工具提示的top和left样式属性。最后，在鼠标移出按钮时，移除工具提示的活动类以隐藏它。

通过这种方式，你可以确保工具提示出现在鼠标悬停位置的上方。