element表格悬停将单元格数据渲染在气泡框中

您可以使用CSS和JavaScript来实现这个效果。以下是一个示例代码：

HTML：

<table>
  <tr>
    <th>名称</th>
    <th>价格</th>
  </tr>
  <tr>
    <td data-tooltip="这是一个气泡框">苹果</td>
    <td>$1.00</td>
  </tr>
  <tr>
    <td data-tooltip="这是另一个气泡框">香蕉</td>
    <td>$0.50</td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse;
}

td {
  padding: 10px;
  position: relative;
}

td[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

td[data-tooltip]:hover::before {
  opacity: 1;
}

JavaScript：

// 为所有具有 data-tooltip 属性的单元格添加事件监听器
document.querySelectorAll('td[data-tooltip]').forEach(td => {
  td.addEventListener('mousemove', event => {
    // 获取气泡框元素
    const tooltip = td.querySelector(':before');

    // 设置气泡框位置
    tooltip.style.top = `${event.clientY}px`;
    tooltip.style.left = `${event.clientX}px`;
  });
});

在上面的示例中，我们为每个带有 `data-tooltip` 属性的单元格添加了一个伪元素 `::before`，并使用 CSS 将其显示为气泡框。然后，我们使用 JavaScript 监听单元格的 `mousemove` 事件，并在鼠标移动时更新气泡框的位置。当单元格被悬停时，气泡框变得可见。