DataTable单元格内Bootstrap Tooltip失效问题求助

嘿，我来帮你搞定这个Tooltip不工作的问题！咱们一步步来分析和解决：

问题根源 #

你遇到的问题主要有两个原因：

1. 拼写错误：你把Bootstrap Tooltip需要的属性写成了data-toogle，正确的应该是data-toggle（少了字母l），这个错误本身就会导致Tooltip无法触发。
2. DOM渲染时机冲突：你在初始化DataTables之前就调用了$("[data-toogle='tooltip']").tooltip()，但当你指定columns配置时，DataTables会重新渲染整个表格——包括最后一列的按钮，相当于把你原来HTML里的按钮替换成了新的DOM元素，而新元素没有被绑定Tooltip事件。

解决方案 #

步骤1：修正属性拼写 #

把所有按钮上的data-toogle改成data-toggle。

步骤2：调整Tooltip初始化时机 #

利用DataTables的initComplete回调函数，在表格完全渲染完成后再初始化Tooltip，这样就能确保新生成的按钮元素被正确绑定事件。

步骤3：修正DataTables的columns配置 #

如果你的表格是静态HTML数据（像你现在的示例），不需要给columns指定data属性；如果后续要绑定JSON数据，最后一列需要用render函数来生成带Tooltip的按钮（这样每次表格更新时，新生成的按钮都会被正确初始化Tooltip）。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>DataTable - Buttons with ToolTip</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
</head>
<body>
<section class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>LastName</th>
                        <th>Age</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Jhon</td>
                        <td>Jhosson</td>
                        <td>20</td>
                        <td>
                            <button id="ButtonA" class="btn btn-primary" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">A</button>
                            <button id="ButtonB" class="btn btn-danger" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">B</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Scalert</td>
                        <td>Lopez</td>
                        <td>33</td>
                        <td>
                            <button class="btn btn-primary" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">A</button>
                            <button id="ButtonB" class="btn btn-danger" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">B</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("table").DataTable({
        "columns": [
            { "data": "Name" },
            { "data": "LastName" },
            { "data": "Age" },
            { "data": "Button" }
        ],
        // 表格初始化完成后再绑定Tooltip
        "initComplete": function(settings, json) {
            $('[data-toggle="tooltip"]').tooltip();
        }
    });
});
</script>
</body>
</html>

针对JSON数据绑定的优化（如果后续需要） #

如果你之后要通过JSON数据动态更新表格，最后一列应该用render函数来生成按钮，确保每次表格刷新时都能正确生成带Tooltip的元素：

$("table").DataTable({
    "ajax": "your-json-data-url",
    "columns": [
        { "data": "Name" },
        { "data": "LastName" },
        { "data": "Age" },
        {
            "data": null,
            "render": function(data, type, row) {
                return `
                    <button class="btn btn-primary" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">A</button>
                    <button class="btn btn-danger" data-toggle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">B</button>
                `;
            }
        }
    ],
    "initComplete": function(settings, json) {
        $('[data-toggle="tooltip"]').tooltip();
    },
    // 如果表格有动态更新（比如分页、搜索），还要在draw事件里重新初始化Tooltip
    "drawCallback": function(settings) {
        $('[data-toggle="tooltip"]').tooltip();
    }
});

这样不管表格怎么刷新，Tooltip都能正常工作啦！

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