Javascript Bootstrap 4工具提示在使用Datatables.net时卡住

场景：使用服务器端处理加载datatables网格。在“标题”列上设置工具提示。鼠标悬停时，将显示工具提示

问题：我得到了工具提示。但发现了一个我无法解决的问题

将鼠标悬停在其中一个标题上，该标题将显示工具提示

将鼠标悬停在标题上的同时，使用键盘将“显示10条记录”更改为“显示25条记录”

加载记录后，工具提示将粘贴在屏幕上

这是我的代码片段

var table = $('#list-of-product').DataTable({
            "processing": true,
            "serverSide": true,
            "info": true,
            "stateSave": false,
            "bFilter": false,
            "drawCallback": function (settings, json) {
                $('[data-toggle="tooltip"]').tooltip('update');
                //$("#list-of-product tbody tr > td").tooltip('hide');
            },
            "ajax": {
                "url": "@Url.Action("GetProducts", "LandingPage")",
                "type": "POST"
            },
            "language": {
                "paginate": {
                    "previous": "<<",
                    "next": ">>"
                },
                "info": "Showing _START_ to _END_ of _TOTAL_",
                "lengthMenu": "Show _MENU_",
                "search": "",
                "searchPlaceholder": "Search..."
            },
            "columns": [
                            { "data": "LineOfBusiness", "orderable": true },
                            { "data": "Discipline", "orderable": true },
                            { "data": "InventoryProgram", "orderable": true },
                            { "data": "ISBN13", "orderable": true },
                            { "data": "Title", "orderable": true },
                            { "data": "ProductID", "orderable": true },
                            {
                                data: null,
                                className: "text-center",
                                defaultContent: '<a href="#list-of-product" data-toggle="modal" data-target="#ContactAssigner"><i class="material-icons">assignment_ind</i></a>',
                                "orderable": false
                            }
            ],
            "order": [[0, "asc"]],
            createdRow: function (row, data, dataIndex) {
                $(row).find('td:eq(4)').attr('title', data["Title"]);
                $(row).find('td:eq(4)').attr('data-toggle', "tooltip");
                //$(row).find('td:eq(4)').tooltip();
            }
        });

var table=$（“#产品列表”）.DataTable({
“处理”：对，
“服务器端”：正确，
“信息”：正确，
“stateSave”：false，
“bFilter”：错误，
“drawCallback”：函数（设置，json）{
$（'[data toggle=“tooltip”]'）。工具提示（“更新”）；
//$（“#产品列表tbody tr>td”）。工具提示（'hide'）；
},
“ajax”：{
“url”：“@url.Action（“GetProducts”、“LandingPage”）”，
“类型”：“职位”
},
“语言”：{
“分页”：{
“以前的”：”
},
“信息”：“显示总计的开始到结束”，
“长度菜单”：“显示菜单”，
“搜索”：“，
“搜索占位符”：“搜索…”
},
“栏目”：[
{“数据”：“业务线”，“可订购”：true}，
{“数据”：“规程”，“有序”：true}，
{“数据”：“InventoryProgram”，“orderable”：true}，
{“data”：“ISBN13”，“orderable”：true}，
{“data”：“Title”，“orderable”：true}，
{“数据”：“ProductID”，“orderable”：true}，
{
数据：空，
类名：“文本中心”，
defaultContent:“”，
“可订购”：false
}
],
“订单”：[[0，“asc”]]，
createdRow：函数（行、数据、数据索引）{
$（行）.find（'td:eq（4）'）.attr（'title'，data[“title”]）；
$（行）.find（'td:eq（4）'）.attr（'data-toggle'，'tooltip'）；
//$（行）.find（'td:eq（4）'）.tooltip（）；
}
});

---

任何建议都会有帮助。谢谢。

您需要挂接此页面大小更改事件，然后隐藏任何打开的工具提示

$('#list-of-product').on('length.dt', function (e, settings, len) {
    $('[data-toggle="tooltip"]').tooltip('hide');
});

---

drawCallback

事件不会很好地工作，因为它是在init上调用的，并且在表格更新时，可能不需要隐藏所有工具提示。

谢谢@ZimSystem。它工作得很好。我使用的这个函数也可以使用

drawCallback]：函数（settings，json）{$（'[data toggle=“tooltip”]'）。tooltip（）；$（“[id^='tooltip']”）。tooltip（'hide'）；}

谢谢@RanjithVaradan，你的函数对我有效。也可以用于引导弹出窗口。

$('#list-of-product').on('length.dt', function (e, settings, len) {
    $('[data-toggle="tooltip"]').tooltip('hide');
});