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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap 4工具提示使用Datatables.net卡住了相关的知识,希望对你有一定的参考价值。

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

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

  1. 将鼠标悬停在其中一个标题上,其中显示了工具提示

enter image description here

  1. 在保持鼠标悬停在标题上的同时,使用键盘将show 10记录更改为25条记录。

enter image description here

  1. 加载记录后,工具提示卡在屏幕上。

enter image description here

这是我的代码片段

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

任何意见将是有益的。谢谢。

答案

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

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

Demo on Codeply

drawCallback事件将无法正常工作,因为它可以在init上以及表更新时调用,此时可能没有必要隐藏所有工具提示。

以上是关于Bootstrap 4工具提示使用Datatables.net卡住了的主要内容,如果未能解决你的问题,请参考以下文章

WordPress - 如何使用 Bootstrap 4.5 在工具提示中添加 HTML?

如何使用php在工具提示Bootstrap 4中显示图像

Ruby on Rails 6. 使用带有 Ajax 的 Bootstrap 4 工具提示

Bootstrap 4 工具提示样式仅适用于第一部分

如何设置bootstrap 4的工具提示[重复]

Bootstrap 4,“未捕获错误:Bootstrap工具提示需要Tether(http://github.hubspot.com/tether/)”