实现鼠标坐标转换的Tooltip弹出层

为了实现一个基于鼠标坐标的 Tooltip 弹出层，我们需要先定义一系列用于获取窗口和文档几何属性的方法。以下是详细的代码实现：

首先，我们创建一个名为 Geometry 的对象，用于封装与窗口和文档相关的几何属性方法。

var Geometry = {};

接下来，根据浏览器的不同特性，分别设置获取窗口 X 和 Y 坐标的函数：

if (window.screenLeft) {
  Geometry.getWindowX = function() { return window.screenLeft; };
  Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screenX) {
  Geometry.getWindowX = function() { return window.screenX; };
  Geometry.getWindowY = function() { return window.screenY; };
}

然后，我们继续为视口宽度、高度以及水平和垂直滚动偏移量添加相应的获取方法：

if (window.innerWidth) {
  Geometry.getViewportWidth = function() { return window.innerWidth; };
  Geometry.getViewportHeight = function() { return window.innerHeight; };
  Geometry.getHorizOntalScroll= function() { return window.pageXOffset; };
  Geometry.getVerticalScroll = function() { return window.pageYOffset; };
} else if (document.documentElement && document.documentElement.clientWidth) {
  Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
  Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
  Geometry.getHorizOntalScroll= function() { return document.documentElement.scrollLeft; };
  Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
} else if (document.body.clientWidth) {
  Geometry.getViewportWidth = function() { return document.body.clientWidth; };
  Geometry.getViewportHeight = function() { return document.body.clientHeight; };
  Geometry.getHorizOntalScroll= function() { return document.body.scrollLeft; };
  Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}

最后，我们添加获取整个文档宽度和高度的方法：

if (document.documentElement && document.documentElement.scrollWidth) {
  Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
  Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
  Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
  Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}

接下来是 Tooltip 的实现部分。我们定义了一个名为 Tooltip 的对象，用于创建和管理 Tooltip 弹出层。

Tooltip.X_OFFSET = 25;
Tooltip.Y_OFFSET = 15;
Tooltip.DELAY = 500;
Tooltip.Text = '';
function Tooltip() {
  this.tooltip = document.createElement('div'); // 创建阴影 div
  this.tooltip.style.position = 'absolute';
  this.tooltip.style.visibility = 'hidden';
  this.tooltip.className = 'tooltipShadow';
  this.cOntent= document.createElement('div'); // 创建内容 div
  this.content.style.position = 'relative';
  this.content.className = 'tooltipContent';
  this.tooltip.appendChild(this.content);
}

接着，我们为 Tooltip 添加显示和隐藏的方法：

Tooltip.prototype.show = function(text, x, y) {
  this.content.innerHTML = text;
  this.tooltip.style.left = x + 'px';
  this.tooltip.style.top = y + 'px';
  this.tooltip.style.visibility = 'visible';
  if (this.tooltip.parentNode !== document.body) document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function() {
  this.tooltip.style.visibility = 'hidden';
};

为了实现延迟显示功能，我们还添加了调度方法：

Tooltip.prototype.schedule = function(target, e) {
  var text = Tooltip.Text;
  if (!text) return;
  var x = e.clientX + Geometry.getHorizontalScroll();
  var y = e.clientY + Geometry.getVerticalScroll();
  x += Tooltip.X_OFFSET;
  y += Tooltip.Y_OFFSET;
  var self = this;
  var timer = window.setTimeout(function() {
    self.show(text, x, y);
  }, Tooltip.DELAY);
  var mouseout = function() {
    self.hide();
    window.clearTimeout(timer);
    if (target.removeEventListener) target.removeEventListener('mouseout', mouseout, false);
    else if (target.detachEvent) target.detachEvent('onmouseout', mouseout);
    else target.Onmouseout= null;
  };
  if (target.addEventListener) target.addEventListener('mouseout', mouseout, false);
  else if (target.attachEvent) target.attachEvent('onmouseout', mouseout);
  else target.Onmouseout= mouseout;
};
Tooltip.tooltip = new Tooltip();
Tooltip.schedule = function(target, e) { Tooltip.tooltip.schedule(target, e); }
Tooltip.init = function(value) { Tooltip.Text = value; }

最后是 Tooltip 的样式定义：

.tooltipShadow {
  background-color: #A9A9A9;
}
.tooltipContent {
  left: -4px;
  top: -4px;
  background-color: #F0F8FF;
  border: solid black 1px;
  padding: 5px;
  font: 9pt sans-serif;
  color: #0000CC;
  width: 150px;
}

使用方法：

在需要提示的地方加入 οnmοusemοve="Tooltip.schedule(this,event)"，并在 JS 中设置提示内容 Tooltip.init("提示的内容");。