新手求助：如何实现表格单元格Tooltip文本动态替换？

嘿，我来帮你搞定这个Tooltip动态显示单元格内容的问题！你现在Tooltip显示静态文本，是因为初始化时title被固定成了"text"，我们只需要修改functionMouseOver()函数，让它在鼠标悬停时把单元格内容赋值给Tooltip的title，再更新Tooltip实例就可以实现需求了。

1. 修改functionMouseOver()函数 #

我们需要在函数里完成三个核心操作：

• 保留原有改变单元格背景色的功能
• 获取当前单元格的内容
• 更新单元格的title属性，并重新初始化Tooltip（因为Bootstrap Tooltip初始化后不会自动监听title的变化）

修改后的函数代码如下：

function functionMouseOver(id) {
    const cell = document.getElementById(id);
    // 保留原有背景色切换逻辑
    cell.style.backgroundColor = "rgb(0,255,255)";
    // 获取单元格内容，用innerHTML或textContent都可以，按需选择
    const cellContent = cell.innerHTML;
    // 更新单元格的title属性为当前内容
    cell.setAttribute('title', cellContent);
    // 重新初始化Tooltip，让新的title生效
    $(cell).tooltip('dispose').tooltip();
}

2. 优化表格生成代码（可选） #

你原来生成<td>时设置的title="text"可以改成空值，避免初始状态显示无关文本：

// 原代码中的title部分
title='"+'"text"'+"'
// 修改为
title='"+'"'+"'

3. 完整修改后的可运行代码 #

下面是整合了所有修改的完整代码，直接运行就能看到动态Tooltip的效果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.class2 {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 36px;
    font-family: "Lucida Console", Monaco, monospace;
}
.class1 {
    background-color: rgb(200, 100, 200);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 36px;
    font-family: "Lucida Console", Monaco, monospace;
}
table {
    border-spacing: 1px;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}
td {
    cursor: pointer;
    padding: 10px;
    position: relative;
}
</style>

<body id="HTMLBody">
</body>

<script>
function functionMouseOver(id) {
    const cell = document.getElementById(id);
    cell.style.backgroundColor = "rgb(0,255,255)";
    // 获取单元格内容并设置为title
    const cellContent = cell.innerHTML;
    cell.setAttribute('title', cellContent);
    // 重新初始化Tooltip
    $(cell).tooltip('dispose').tooltip();
}
function functionMouseOut(id) {
    document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}

// 创建HTML表格主体
titlenames = ["Jan", "Feb", "Mar"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='container'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 3; i++) {
    HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 2; i++) {
    HTMLTableBody += "<tr>";
    for (var j = 0; j < 3; j++) {
        idstr = "td" + cnt;
        // 修改title为空，避免初始静态文本
        HTMLTableBody += "<td id='td" + cnt + "' class='class2'" + ' onMouseOver =' + '"functionMouseOver(' + "'" + idstr + "'" + ')"' + ' onMouseOut =' + '"functionMouseOut(' + "'" + idstr + "'" + ')"' + ' data-container =' + '"body"' + ' data-placement=' + '"right"' + ' data-toggle=' + '"tooltip"' + ' title=' + '"' + '"' + "></td> ";
        cnt++;
    }
    HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";
document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;

// 填充表格数据
cnt = 0;
for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 3; j++) {
        var strid = "td" + cnt;
        document.getElementById(strid).innerHTML = cnt;
        cnt++;
    }
}

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

额外简洁方案（可选） #

如果你不想每次都重新初始化Tooltip，也可以在初始化时直接让Tooltip动态获取单元格内容，这样连functionMouseOver()里的title修改逻辑都可以省略，只保留背景色切换：

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip({
        title: function() {
            // text()取纯文本，innerHTML保留HTML格式，按需选择
            return $(this).text();
        }
    });
});

这种方法更简洁，推荐尝试哦！

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