使用 Datatables.net 卡住的 Bootstrap 4 工具提示

Posted 2023-05-09

【中文标题】使用 Datatables.net 卡住的 Bootstrap 4 工具提示

【英文标题】：Bootstrap 4 tooltip stuck using Datatables.net

【发布时间】：2018-08-08 08:30:15

【问题描述】：

场景：使用服务器端处理加载数据表网格。在标题列上设置工具提示。当鼠标悬停时，会显示工具提示。

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

将鼠标悬停在显示工具提示的标题上

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

加载记录后，工具提示卡在屏幕上。

这是我的代码 sn-p

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();
            
        );

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

【参考方案1】：

您需要挂钩此页面大小更改事件，然后隐藏所有打开的工具提示。

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

Demo on Codeply

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

【讨论】：

感谢@ZimSystem。它完美地工作。我用这个也可以drawCallback": function (settings, json) $('[data-toggle="tooltip"]').tooltip(); $("[id^='tooltip']").tooltip('hide');

感谢@RanjithVaradan，你的对我有用。也适用于引导弹出窗口。