JavaScript实现简易Tooltip工具提示组件

.tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}
<p>.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: #333;
}</p>

class Tooltip {
  constructor() {
    this.tooltipEl = null;
    this.init();
  }
<p>init() {
document.body.addEventListener('mouseenter', (e) => {
const target = e.target;
const tooltipText = target.getAttribute('data-tooltip');
if (!tooltipText) return;</p><pre class="brush:php;toolbar:false;">  this.showTooltip(target, tooltipText);
});

document.body.addEventListener('mouseleave', () => {
  this.hideTooltip();
});

}

showTooltip(element, text) { this.tooltipEl = document.createElement('div'); this.tooltipEl.className = 'tooltip'; this.tooltipEl.textContent = text; document.body.appendChild(this.tooltipEl);

this.positionTooltip(element);

}

positionTooltip(element) { const rect = element.getBoundingClientRect(); const tooltipRect = this.tooltipEl.getBoundingClientRect();

let top = rect.top - tooltipRect.height - 8;
let left = rect.left + (rect.width - tooltipRect.width) / 2;

// 简单边界检测
left = Math.max(8, Math.min(left, window.innerWidth - tooltipRect.width - 8));

if (top < 8) {
  top = rect.bottom + 8;
}

this.tooltipEl.style.top = `${top + window.scrollY}px`;
this.tooltipEl.style.left = `${left + window.scrollX}px`;

}

hideTooltip() { if (this.tooltipEl) { this.tooltipEl.remove(); this.tooltipEl = null; } } }

// 启动Tooltip new Tooltip();

<button data-tooltip="保存当前设置">保存</button>
<span data-tooltip="这是说明文字">❓</span>