鼠标悬停时弹出窗口消失

<div class="hover-element" data-tooltip="提示内容">鼠标悬停我</div>

.tooltip {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
}

// 获取所有带有自定义属性的悬停元素
const hoverElements = document.querySelectorAll('.hover-element');

// 监听鼠标悬停事件
hoverElements.forEach(element => {
  element.addEventListener('mouseover', () => {
    // 创建悬停提示框元素
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip');
    tooltip.innerText = element.dataset.tooltip;

    // 设置悬停提示框位置
    const elementRect = element.getBoundingClientRect();
    tooltip.style.top = `${elementRect.top + window.pageYOffset}px`;
    tooltip.style.left = `${elementRect.left + window.pageXOffset}px`;

    // 添加悬停提示框到文档中
    document.body.appendChild(tooltip);
  });

  // 监听鼠标移开事件
  element.addEventListener('mouseout', () => {
    // 移除悬停提示框
    const tooltip = document.querySelector('.tooltip');
    tooltip.remove();
  });
});