如何实现鼠标悬停Info时显示分层定价表格？

我正在开发一款价格计算器，期望实现鼠标悬停在“Info”文本上时，显示包含分层定价的表格。分层定价数据如下：

var pricingbackendzr = {4:35,10:32.5,20:30};
var pricingbackendz = {4:20,10:18,20:16};
var pricingapp = {10:7.5,25:7,50:6.5,75:6,1000:5.5};

尝试将表格加入页面后，悬停时无任何显示效果，以下是当前的HTML、CSS和JavaScript代码，请帮忙排查并解决问题：
[原代码片段保留]

核心问题分析及修复 #

以下是悬停无效果的常见原因及对应修复方案：

• 事件绑定缺失
  若未给“Info”元素绑定悬停事件，表格自然不会触发显示。需添加mouseenter/mouseleave事件来控制tooltip的显示隐藏，同时动态生成定价表格：

  // 获取Info元素，创建tooltip容器
  const infoEl = document.querySelector('.info-text');
  const tooltip = document.createElement('div');
  tooltip.className = 'pricing-tooltip';
  tooltip.style.display = 'none';
  document.body.appendChild(tooltip);
  
  // 生成定价表格的函数
  function buildPricingTable() {
    let table = '<table><thead><tr><th>数量</th><th>BackendZR</th><th>BackendZ</th><th>App</th></tr></thead><tbody>';
    // 整合所有数量值，去重并排序
    const allQty = [...new Set([...Object.keys(pricingbackendzr), ...Object.keys(pricingbackendz), ...Object.keys(pricingapp)])]
      .map(Number)
      .sort((a, b) => a - b);
    
    allQty.forEach(qty => {
      table += `<tr>
        <td>${qty}</td>
        <td>${pricingbackendzr[qty] || '-'}</td>
        <td>${pricingbackendz[qty] || '-'}</td>
        <td>${pricingapp[qty] || '-'}</td>
      </tr>`;
    });
    table += '</tbody></table>';
    return table;
  }
  
  // 绑定悬停事件
  infoEl.addEventListener('mouseenter', (e) => {
    tooltip.innerHTML = buildPricingTable();
    // 设置tooltip位置（跟随Info元素右侧）
    const rect = e.target.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 10}px`;
    tooltip.style.top = `${rect.top}px`;
    tooltip.style.display = 'block';
  });
  
  infoEl.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
  

• CSS样式问题导致tooltip不可见
  若tooltip的CSS未设置或被覆盖，可能出现元素存在但不可见的情况。添加基础样式确保tooltip正常显示：

  .pricing-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 9999; /* 确保tooltip在最上层 */
  }
  .pricing-tooltip table {
    border-collapse: collapse;
    min-width: 300px;
  }
  .pricing-tooltip th, .pricing-tooltip td {
    border: 1px solid #eee;
    padding: 5px 10px;
    text-align: right;
  }
  .pricing-tooltip th {
    background-color: #f8f8f8;
    font-weight: 600;
  }
  .info-text {
    cursor: help;
    color: #007bff;
    text-decoration: underline;
  }
  

• HTML结构缺失
  确保页面中存在对应的“Info”元素，否则事件绑定会失败：

  <span class="info-text">Info</span>
  

• 数据处理逻辑错误
  对象的键默认是字符串类型，直接排序会出现"10"排在"2"前的问题，需转换为数字后再排序，如上述buildPricingTable函数中的处理方式。

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>价格计算器定价tooltip示例</title>
  <style>
    .info-text {
      cursor: help;
      color: #007bff;
      text-decoration: underline;
    }
    .pricing-tooltip {
      position: absolute;
      background: #fff;
      border: 1px solid #ddd;
      padding: 8px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      z-index: 9999;
    }
    .pricing-tooltip table {
      border-collapse: collapse;
      min-width: 300px;
    }
    .pricing-tooltip th, .pricing-tooltip td {
      border: 1px solid #eee;
      padding: 5px 10px;
      text-align: right;
    }
    .pricing-tooltip th {
      background-color: #f8f8f8;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div>价格计算器 <span class="info-text">Info</span></div>

  <script>
    var pricingbackendzr = {4:35,10:32.5,20:30};
    var pricingbackendz = {4:20,10:18,20:16};
    var pricingapp = {10:7.5,25:7,50:6.5,75:6,1000:5.5};

    const infoEl = document.querySelector('.info-text');
    const tooltip = document.createElement('div');
    tooltip.className = 'pricing-tooltip';
    tooltip.style.display = 'none';
    document.body.appendChild(tooltip);

    function buildPricingTable() {
      let table = '<table><thead><tr><th>数量</th><th>BackendZR</th><th>BackendZ</th><th>App</th></tr></thead><tbody>';
      const allQty = [...new Set([...Object.keys(pricingbackendzr), ...Object.keys(pricingbackendz), ...Object.keys(pricingapp)])]
        .map(Number)
        .sort((a, b) => a - b);
      
      allQty.forEach(qty => {
        table += `<tr>
          <td>${qty}</td>
          <td>${pricingbackendzr[qty] || '-'}</td>
          <td>${pricingbackendz[qty] || '-'}</td>
          <td>${pricingapp[qty] || '-'}</td>
        </tr>`;
      });
      table += '</tbody></table>';
      return table;
    }

    infoEl.addEventListener('mouseenter', (e) => {
      tooltip.innerHTML = buildPricingTable();
      const rect = e.target.getBoundingClientRect();
      tooltip.style.left = `${rect.right + 10}px`;
      tooltip.style.top = `${rect.top}px`;
      tooltip.style.display = 'block';
    });

    infoEl.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none';
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者programmnoob