JS实现hover延迟提示技巧

function initTooltip(element, content, delay = 300) {
  let timeoutId = null;

  const show = () => {
    // 可创建/显示tooltip元素，例如：
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.textContent = content;
    tooltip.style.cssText = 'position: absolute; background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none;';
    document.body.appendChild(tooltip);

    // 简单定位（可根据需要增强）
    const rect = element.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 8}px`;
    tooltip.style.top = `${rect.top + window.scrollY}px`;
  };

  const hide = () => {
    const tooltip = document.querySelector('.tooltip');
    if (tooltip) tooltip.remove();
  };

  const handleMouseEnter = () => {
    timeoutId = setTimeout(show, delay);
  };

  const handleMouseLeave = () => {
    clearTimeout(timeoutId);
    hide();
  };

  element.addEventListener('mouseenter', handleMouseEnter);
  element.addEventListener('mouseleave', handleMouseLeave);

  // 返回清理函数，便于解绑
  return () => {
    element.removeEventListener('mouseenter', handleMouseEnter);
    element.removeEventListener('mouseleave', handleMouseLeave);
  };
}

// 使用示例
const btn = document.querySelector('#myButton');
initTooltip(btn, '这是按钮的说明文字');

.tooltip {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.tooltip.show {
  opacity: 1;
}