当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现Tooltip组件教程

JavaScript实现Tooltip组件教程

2025-11-10 17:24:35 0浏览收藏

基本结构与样式

Tooltip组件由触发元素和提示内容两部分组成。HTML结构可以非常简单：

使用data-tooltip属性存储提示文本，避免额外的DOM嵌套。

基础CSS样式如下，确保提示框定位准确且美观：

.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;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: #333;
}

JavaScript实现逻辑

核心功能包括：监听鼠标进入/离开事件、动态创建并定位Tooltip、以及清理资源。

以下是完整实现代码：

class Tooltip {
  constructor() {
    this.tooltipEl = null;
    this.init();
  }
init() {
document.body.addEventListener('mouseenter', (e) => {
const target = e.target;
const tooltipText = target.getAttribute('data-tooltip');
if (!tooltipText) return;
  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();