js 获取动态元素，鼠标悬浮弹窗显示

在JavaScript中，获取动态生成的元素并为其添加鼠标悬浮事件（hover）通常需要结合`MutationObserver`来监控DOM的变化。`MutationObserver`是一个监听DOM树变化的API，当新的元素被插入、删除或修改时，它会触发回调函数。

下面是一个基本示例，展示如何获取动态元素并在鼠标悬浮时显示弹窗：

// 首先创建一个显示弹窗的函数
function showTooltip(element) {
  element.addEventListener('mouseover', function() {
    // 创建一个临时的弹窗节点
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip'); // 确保样式可用
    tooltip.textContent = '这是元素的提示信息';

    // 将弹窗添加到文档某个位置，这里假设是元素旁边
    element.appendChild(tooltip);

    // 当鼠标离开元素时清除弹窗
    element.addEventListener('mouseout', function() {
      tooltip.remove();
    });
  });
}

// 使用MutationObserver观察document.body的变化
const observer = new MutationObserver((mutationsList, observer) => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'childList') { // 只关心元素增加的情况
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) { // 如果是新添加的元素
          if (node.matches('your-selector')) { // 替换'your-selector'为你想要监控的元素选择器
            showTooltip(node);
          }
        }
      });
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true }); // 监听body及其所有后代

// 要停止观察，只需调用observer.disconnect()

在这个例子中，你需要将 `'your-selector'` 替换成实际的目标元素选择器，并根据需求调整弹窗的显示位置和内容。