如何在服务器端AJAX Datatable的fas fa-check-circle操作按钮上使用tooltip

步骤1：修改控制器中动作列的按钮配置 #

你需要先给fas fa-check-circle对应的a标签加上tooltip需要的属性，同时修正原有代码中data-target拼接错误的问题：

->addColumn('action', function ($row) {
    $btn = '
            <a
                class="text-primary mr-3 edit actionEdit editItem" href="javascript:void(0)"
                data-id="' . $row->id . '"
                data-toggle="modal" id="updateItem">
                <i class="fas fa-edit"></i>
            </a>
            <a
                class="text-danger mr-3 actionDelete deleteItem" href="javascript:void(0)"
                id="' . $row->id . '" data-original-title="删除"
                data-target="#deleteQuotation' . $row->id . '">
                <i class="fas fa-trash"></i>
            </a>
            <a
                class="text-success mr-3" href="javascript:void(0)"
                id="' . $row->id . '" 
                data-toggle="tooltip"
                title="标记为已确认"
                data-target="#confirm' . $row->id . '">
                <i class="fas fa-check-circle"></i>
            </a>';
    return $btn;
})

如果你使用的是Bootstrap 5，请将属性替换为data-bs-toggle="tooltip"、data-bs-title="标记为已确认"。

步骤2：修改Datatable初始化代码，监听绘制事件初始化Tooltip #

由于Datatable是AJAX动态渲染内容，页面加载完成后初始化的Tooltip无法识别后续新增的按钮元素，需要在表格每次重绘完成后重新初始化Tooltip：

Bootstrap 4 版本代码 #

var table = $('.diagnosis-table').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    ajax: "/claim/claimDiagnosis/" + lastSegment,
    dom: '<"top"fB>rt<"bottom"lip><"clear">',
    columns: [{
            data: 'diagnosis_id',
            name: 'diagnosis_id'
        },
        {
            data: 'name',
            name: 'name'
        },
        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
        },
    ],
    "lengthMenu": [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
    ],
    // 新增drawCallback回调，表格重绘后初始化Tooltip
    drawCallback: function() {
        $('[data-toggle="tooltip"]').tooltip();
    }
});

Bootstrap 5 版本代码 #

drawCallback: function() {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
        new bootstrap.Tooltip(el);
    });
}

前提检查 #

• 确保页面已经引入对应版本Bootstrap的JS文件，Bootstrap 4需要额外引入Popper.js依赖
• 若使用其他UI框架的Tooltip组件，对应替换初始化逻辑即可

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