HTML img标签title属性无法正确渲染表格

兄弟，你遇到的问题其实是个常见小坑——HTML原生的title属性只支持纯文本展示，不管你塞进去多少HTML标签，浏览器都会把它们当成普通字符串直接显示，所以才会看到表格代码而不是渲染好的表格。

要实现悬停显示HTML表格的效果，我们需要自己做一个自定义的tooltip组件，下面给你两种可行的方案：

方案一：原生JavaScript实现自定义Tooltip #

这种方法不需要依赖任何第三方库，纯原生代码就能搞定：

第一步：修改生成图片的函数 #

我们把电话和手机号存在图片的data属性里，同时给图片加一个类名方便后续监听事件：

function FormatAssessorInfo(P1, P2) { 
  // 用模板字符串更简洁，把数据存在data属性中
  return `<img src="/files/404048/93171/Info-32.png" height="15" width="15" 
          class="assessor-tooltip" 
          data-phone="${P1}" 
          data-cell="${P2}" 
          style="cursor: help;"/>`; 
}

第二步：添加Tooltip的逻辑代码 #

页面加载完成后，我们创建一个全局的tooltip容器，监听图片的hover事件来动态生成表格并显示：

// 页面加载完成后初始化tooltip逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 创建一个用于显示tooltip的div容器
  const tooltipBox = document.createElement('div');
  tooltipBox.style.cssText = `
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    z-index: 9999;
    display: none;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  `;
  document.body.appendChild(tooltipBox);

  // 给所有带assessor-tooltip类的图片绑定事件
  document.querySelectorAll('.assessor-tooltip').forEach(img => {
    // 鼠标悬停时显示tooltip
    img.addEventListener('mouseover', function(e) {
      const phone = this.dataset.phone;
      const cell = this.dataset.cell;
      // 构造表格的HTML内容
      const tableContent = `
        <table width="200px" border="0" cellspacing="0" cellpadding="2">
          <tbody>
            <tr>
              <td>Phone:</td>
              <td>${phone}</td>
              <td>Cell:</td>
              <td>${cell}</td>
            </tr>
          </tbody>
        </table>
      `;
      // 把表格内容插入tooltip容器
      tooltipBox.innerHTML = tableContent;
      // 设置tooltip的位置（在图片上方10px处）
      const imgRect = this.getBoundingClientRect();
      tooltipBox.style.left = `${imgRect.left + window.scrollX}px`;
      tooltipBox.style.top = `${imgRect.top + window.scrollY - tooltipBox.offsetHeight - 10}px`;
      tooltipBox.style.display = 'block';
    });

    // 鼠标离开时隐藏tooltip
    img.addEventListener('mouseout', function() {
      tooltipBox.style.display = 'none';
    });

    // 可选：让tooltip跟随鼠标移动
    img.addEventListener('mousemove', function(e) {
      tooltipBox.style.left = `${e.pageX + 10}px`;
      tooltipBox.style.top = `${e.pageY + 10}px`;
    });
  });
});

方案二：使用第三方Tooltip库（更省心） #

如果不想自己写原生代码，也可以用成熟的第三方库，比如Tooltipster、Bootstrap Tooltip，这些库都支持直接渲染HTML内容的tooltip。以Bootstrap为例，你只需要：

1. 引入Bootstrap的CSS和JS文件
2. 修改生成图片的函数，添加data-bs-toggle="tooltip"和data-bs-html="true"属性，把表格内容放到data-bs-title里：

function FormatAssessorInfo(P1, P2) { 
  const tableHtml = `<table width='200px' border='0' cellspacing='0' cellpadding='2'> <tbody> <tr> <td> Phone: </td> <td> ${P1} </td> <td> Cell: </td> <td> ${P2} </td> </tr> </tbody> </table>`;
  return `<img src="/files/404048/93171/Info-32.png" height="15" width="15" 
          data-bs-toggle="tooltip" 
          data-bs-html="true" 
          data-bs-title="${tableHtml.replace(/"/g, '&quot;')}" 
          style="cursor: help;"/>`;
}

3. 初始化Bootstrap Tooltip：

document.addEventListener('DOMContentLoaded', function() {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
});

这样就能轻松实现支持HTML的tooltip效果啦～

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