js实现tooltip

实现 Tooltip 的基本方法

使用纯 JavaScript 实现 Tooltip 可以通过动态创建 DOM 元素并控制其显示和隐藏。以下是一个简单的实现示例：

// 创建 Tooltip 元素
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
document.body.appendChild(tooltip);

// 为需要 Tooltip 的元素添加事件监听
const elements = document.querySelectorAll('[data-tooltip]');
elements.forEach(el => {
  el.addEventListener('mouseenter', showTooltip);
  el.addEventListener('mouseleave', hideTooltip);
});

function showTooltip(e) {
  const text = e.target.getAttribute('data-tooltip');
  tooltip.textContent = text;
  tooltip.style.display = 'block';

  // 定位 Tooltip
  const rect = e.target.getBoundingClientRect();
  tooltip.style.left = `${rect.left + window.scrollX}px`;
  tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 5}px`;
}

function hideTooltip() {
  tooltip.style.display = 'none';
}

CSS 样式设置

Tooltip 的样式可以通过 CSS 进行自定义：

.tooltip {
  position: absolute;
  display: none;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  max-width: 200px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

使用 HTML 属性存储提示文本

在 HTML 元素上使用 data-tooltip 属性存储提示文本：

<button data-tooltip="这是一个提示">悬停我</button>
<a href="#" data-tooltip="链接提示">链接</a>

增强版 Tooltip 实现

对于更复杂的 Tooltip，可以添加动画效果和位置控制：

function showTooltip(e) {
  const text = e.target.getAttribute('data-tooltip');
  const position = e.target.getAttribute('data-tooltip-position') || 'top';

  tooltip.textContent = text;
  tooltip.className = `tooltip ${position}`;
  tooltip.style.display = 'block';

  const rect = e.target.getBoundingClientRect();
  const scrollX = window.scrollX;
  const scrollY = window.scrollY;

  switch(position) {
    case 'top':
      tooltip.style.left = `${rect.left + scrollX + rect.width/2 - tooltip.offsetWidth/2}px`;
      tooltip.style.top = `${rect.top + scrollY - tooltip.offsetHeight - 5}px`;
      break;
    case 'bottom':
      tooltip.style.left = `${rect.left + scrollX + rect.width/2 - tooltip.offsetWidth/2}px`;
      tooltip.style.top = `${rect.top + scrollY + rect.height + 5}px`;
      break;
    // 其他位置...
  }

  tooltip.style.opacity = '1';
  tooltip.style.transform = 'translateY(0)';
}

CSS 动画效果

为 Tooltip 添加淡入和滑动效果：

.tooltip {
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateY(5px);
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

响应式考虑

确保 Tooltip 在移动设备上也能正常工作：

function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints;
}

if (isTouchDevice()) {
  elements.forEach(el => {
    el.addEventListener('click', toggleTooltip);
  });
}

function toggleTooltip(e) {
  if (tooltip.style.display === 'block') {
    hideTooltip();
  } else {
    showTooltip(e);
  }
}

性能优化

对于大量 Tooltip 元素，使用事件委托优化性能：

document.body.addEventListener('mouseover', function(e) {
  if (e.target.matches('[data-tooltip]')) {
    showTooltip(e);
  }
});

document.body.addEventListener('mouseout', function(e) {
  if (e.target.matches('[data-tooltip]')) {
    hideTooltip();
  }
});

清除 Tooltip

在页面卸载时移除 Tooltip 元素：

window.addEventListener('beforeunload', function() {
  if (tooltip && tooltip.parentNode) {
    tooltip.parentNode.removeChild(tooltip);
  }
});